Angular 2 ngFor 在同一个 tr 元素上答案

【问题标题】：Angular 2 ngFor on the same tr elementAngular 2 ngFor 在同一个 tr 元素上
【发布时间】：2021-02-28 19:30:17
【问题描述】：

cList 的值为：

code value1 value2
ABC  01     test1
DEF  02     test2
GHI  03     test3
JKL  04     test4
MNO  05     test5
PQR  06     test6
STU  07     test7
VWX  08     test8

我的 component.ts 是这样的。数组列表。第 4 个列表添加到 cList1，第 5-8 个列表添加到 cList4。

cList: CaseInventorySummaryCustomDTO[] = [];
cList1: CaseInventorySummaryCustomDTO[] = [];
cList2: CaseInventorySummaryCustomDTO[] = [];

this.cList = this.data.cList;
for (let i = 0; i <= 3; i++) {                  
    this.cList1.push(this.cList[i]);
}
for (let i = 4; i < this.cList.length; i++) { 
    this.cList2.push(this.cList[i]);
}

我的component.html如下：

<table>
<thead colspan="12">
    Subject Specialities
</thead>
<tr *ngFor="let i of cList1; let j of cList2">
    <td style="width: 4em">
       {{i.code}}
    </td>
    <td style="width: 3em">
        {{i.value1}}
    </td>
    <td colspan="2">
        {{i.value2}}
    </td>
    <td style="width: 4em">
        {{j.code}}
    </td>
    <td style="width: 3em">
        {{j.value1}}
    </td>
    <td colspan="2">
        {{j.value2}}
    </td>
</tr>
</table>

我的预期输出是

    Subject Specialities
ABC 01  test1   MNO 05  test5
DEF 02  test2   PQR 06  test6
GHI 03  test4   STU 07  test7
JKL 04  test4   VWX 08  test8

但我看到的是，

    Subject Specialities
MNO 05  test5   MNO 05  test5
PQR 06  test6   PQR 06  test6
STU 07  test7   STU 07  test7
VWX 08  test8   VWX 08  test8

2 ngFor 不能在同一个 tr 上工作吗？还是我对上面的代码有误？有人可以帮忙吗。

【问题讨论】：

您不能在单个 *ngFor 中迭代两个数组。它们需要被分成两个<tr> 标签。
我不能分成 2 tr，因为值 2 有时可能是一个大段落。所以那个 tr 看起来很大，而另一个 tr 看起来很小。有没有相同的解决方法？
@JNPW，你不能使用let i of cList1; let j of cList2 使用let i of cList1; let index=index 并在循环内cList2[index] 代替“j”

标签： angular iterator ngfor

【解决方案1】：

您不能在一个 *ngFor 中执行循环 2 个数组。您可以将元素 <ng-container> 用于第二个循环。

Angular <ng-container> 是一个不会干扰样式或布局的分组元素，因为 Angular 不会将它放入 DOM。

<tr *ngFor="let i of cList1;">
  <ng-container *ngFor="let j of cList2">
    ...
  </ng-container>
</tr>

问题解答

<tr *ngFor="let item of cList1; let i = index">
    <td style="width: 4em">
       {{i.code}}
    </td>
    <td style="width: 3em">
        {{i.value1}}
    </td>
    <td colspan="2">
        {{i.value2}}
    </td>
    <td style="width: 4em">
        {{cList2[i].code}}
    </td>
    <td style="width: 3em">
        {{cList2[i].value1}}
    </td>
    <td colspan="2">
        {{cList2[i].value2}}
    </td>
</tr>

【讨论】：

我试过这个。但是 ng-container 的行为类似于内部 ngfor。因此，对于每个外部 forloop，内部 for 循环执行 4 次，因为它在列表中有 4 个值。所以第一行将在列表中有 8 个值...这对外部循环中的所有 4 行重复
如果您确定 cList1 和 cList2 的长度相同，则只循环一个带有索引的，如 *ngFor="let item of cList1; let i = index" 并指示 cList2 项目，使用 cList2[i].code
即使两个数组长度不同，你也可以在使用 cList2[i].code 之前检查一下
第二个数组有一个拼写错误 - cList2
我不这么认为。检查这个。stackoverflow.com/questions/45176953/…