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

Question

我正在为我的组件的属性使用嵌套的 ngFor 生成二维网格，在某些情况下，我希望网格元素可以单击以调用函数。有没有一种方法可以使用这种结构，我可以将单击的数组的索引传递给我将在此处与 href 关联的函数调用？该数组基本上是一个二维三态（未定义、真或假）。数组正在构建并正确显示，但我无法弄清楚如何从网格中传递正在点击的方块。

在组件扩展的基础class中：

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>

Answer 1

使用 *ngFor 提供的 index 属性。请参阅以下示例：

<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 将是您元素在该行中的索引。您可以使用它们执行任何操作。

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

How to send the indices of an array in nested ngFor (Angular)

javascript

angular

typescript

ngfor