我正在为我的组件的属性使用嵌套的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>
1条答案
按热度按时间643ylb081#
使用
index
提供的财产*ngFor
. 请参见下面的示例: