如何在嵌套的ngfor中发送数组的索引(Angular )

lsmepo6l  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(293)

我正在为我的组件的属性使用嵌套的ngfor生成一个2d网格,在某些条件下,我希望网格元素可以单击以调用函数。是否有一种方法可以使用此结构将单击的数组的索引传递到我将在此处与href关联的函数调用?该数组基本上是一个二维三态(未定义、真或假)。阵列正在构建并正确显示,但我无法确定如何通过网格中单击的正方形。
在组件扩展的基类中:

export abstract class BaseGrid implements OnInit {
  aGrid: (boolean | undefined)[][];
  ...
}

以下是组件的ts:

import { Component, OnInit } from '@angular/core'
import { BaseGrid } from '../base-grid/base-grid.component';

@Component({
  selector: 'display-my-grid',
  templateUrl: './my-grid.component.html',
  styleUrls: ['./my-grid.component.css']
})

export class MyGrid extends BaseGrid implements OnInit {

  constructor() {
    super();
  }

  ngOnInit() {
  }
}

在模板中:

<table class="mybg">
  <tr *ngFor="let aRow of aGrid">
    <td *ngFor="let anElement of aRow">
      <div *ngIf="anElement === undefined" class="elementDiv"><a href="#"><img src="../../assets/transparentGif.gif" class="openElement" /></a></div>
      <div *ngIf="anElement !== undefined && anElement === false" class="elementDiv"><img src="../../assets/aMarker.gif" class="elementMarker" /></div>
      <div *ngIf="anElement !== undefined && anElement === true" class="elementDiv"><img src="../../assets/bMarker.gif" class="elementMarker" /></div>
    </td>
  </tr> 
</table>
643ylb08

643ylb081#

使用 index 提供的财产 *ngFor . 请参见下面的示例:

<table class="mybg">
  <tr *ngFor="let aRow of aGrid; let rowIndex = index">
    <td *ngFor="let anElement of aRow; let elementIndex = index">
      <div *ngIf="anElement === undefined" class="elementDiv"><a href="#"><img src="../../assets/transparentGif.gif" class="openElement" /></a></div>
      <div *ngIf="anElement !== undefined && anElement === false" class="elementDiv"><img src="../../assets/aMarker.gif" class="elementMarker" /></div>
      <div *ngIf="anElement !== undefined && anElement === true" class="elementDiv"><img src="../../assets/bMarker.gif" class="elementMarker" /></div>
    </td>
  </tr> 
</table>
``` `rowIndex` 将为您提供数组的行索引& `elementIndex` 将是该行中元素的索引。您可以使用它们执行任何操作。

相关问题