单行的Angular6多个ngFor-如何在一个ngFor中传递两个值

Posted 2023-03-13

【中文标题】单行的Angular6多个ngFor-如何在一个ngFor中传递两个值

【英文标题】：Angular6 multiple ngFor for single row - How to pass two values in one ngFor

【发布时间】：2019-03-30 17:14:10

【问题描述】：

在表头中，我有动态列和搜索排序功能。但对于特定列，我需要禁用排序功能。 在表中

<thead>
      <tr class="table-head">
        <th *ngFor="let colName of reportColHeader; let i = index">
          colName
          <i [class]="sortIcons[colName]" (click)="toggleSort(colName, i)"></i>
        </th>
      </tr>
    </thead>

在 constructor 我将值作为数组传递。不是来自服务器，它只是静态的

this.reportColHeader = ['ID', 'LABEL 1', 'LABEL 2', 'More'];

所以结果将如下所示

<tr>
 <th>ID <i></i></th>
 <th>LABEL 1 <i></i></th>
 <th>LABEL 2 <i></i></th>
 <th>More <i></i></th>
</tr>

在这里我想禁用特定列的 （排序功能）。 不仅是最后一列或第 n 列。 我的假设是，可能还有一个像

这样的数组

this.reportColHeaderOptions = ['true', 'true', 'false', 'false'];

通过这个值可以显示或隐藏<i></i> 那么我怎样才能在ngFor 中传递这个。 注意：这里我不能使用索引，因为索引会改变。 但我可以按照相同的顺序关注 this.reportColHeader 和 this.reportColHeaderOpions。

【问题讨论】：

您也可以作为对象数组传递而不是 2 个数组，对吗？像 [label: 'ID', isSortDisabled: true, label: 'LABEL 1', isSortDisabled: true] 这样的东西？

【参考方案1】：

为什么不能使用 index ？你可以这样做：

    <th *ngFor="let colName of reportColHeader; let i = index">
      colName
      <i *ngIf="reportColHeaderOpions[i]=='true'"></i>
    </th>

【讨论】：

怎么可能。两者都在不同的数组中。所以索引会起作用。？显示错误类型错误：无法读取未定义的属性“0”。因为它是不同的数组。

这意味着reportColHeaderOpions 在此上下文中不存在。您确定您的组件中有public reportColHeaderOpions = ['true', 'true', 'false', 'false']; 吗？是的，它们是 2 个不同的数组，但您可以使用 [i] 访问它们，因为 i 只是您之前声明的数字（0、1、2、3）。