Question

我正在尝试创建具有动态行和列数的表。每行是一个名称列，后跟一些复选框

<tr *ngFor="let groupPerms of getGroups()">
    <td>{{groupPerms.name}}</td>
    <td *ngFor="let permissionType of availablePermissionTypes">
        <input id="{{groupPerms.name}}.{{$index}}"
                type="checkbox"
                [checked]="groupPerms.checked"
                (click)="doSomething()"/>
    </td>
</tr>

如果我放下外部的* ngFor，并在第一行中对其进行“硬编码”，则它可以正常工作，并调用doSomething方法。使用外部的* ngFor，会出现单击以单击表的行元素（它会轻微闪烁）。使用chrome的开发工具，点击似乎是在重复部分上。在tr中添加（点击）无效

<!--bindings={"ng-reflect-ng-for-of": "[object Object],[object Object"}-->

Answer 1

我不会说谎，我不知道为什么要解决这个问题，但是为了结束……添加trackBy（组件中的indexTracker是一个函数）已经完成了工作。如果有人知道这项工作的原因，我将不胜感激

<tr *ngFor="let groupPerms of getGroups(); trackBy: indexTracker">
    <td>{{groupPerms.name}}</td>
    <td *ngFor="let permissionType of availablePermissionTypes">
        <input id="{{groupPerms.name}}.{{$index}}"
                type="checkbox"
                [checked]="groupPerms.checked"
                (click)="doSomething()"/>
    </td>
</tr>

单击不能在* ng内使用对于重复的表格行（角度）

1 个答案: