*ngFor 循环中是否可以有多个值？

Question

所以我在一个大的嵌套数组中有多个嵌套数组，嵌套数组中的每个元素都是一个包含其详细信息的对象。

这些值是从二维矩阵（x 和 y）的多个复选框中检索的，对于 x 和 y 的每个选择，相关详细信息显示在表格行中（在它们各自的列中）。

由于这些是嵌套数组，代码如下所示，（仅显示）

<tbody *ngFor='let blend of selectedBlends'>
  <tr *ngFor='let bale of blend'/>
    <td>{{ bale.number }}</td>
    <td>{{ bale.weight }}</td>
    <td>{{ bale.value }}</td>
  </tr>
</body>

以这种方式，我有多个

，因此嵌套数组中的每个元素占用两行来分别显示它们的数据，这就是我想要的。

但是我还需要在下一列中显示添加了 bale.weight 的两行，因此假设 bale.weight 的第 1 行是 25，bale.weight 的第 2 行是 32，我似乎无法获得它们的值加在一起显示在下一列中。

是否可以访问 *ngFor 循环的当前索引位置的各个元素值？或者类似下面的代码可以吗？

<tr *ngFor='let bale1, bale2 in blends'/>

我在一个更大的数组中使用嵌套数组的原因是检查是否单击了相同的复选框以将其从显示数据的表中删除。

【问题讨论】：

• 能否请您创建一个具有精确模板和真实数据的 plunkr。我可以分叉它并尝试帮助。只是无法得到你真正想做的事？ <tr *ngFor='let bale1, bale2 in blends'/>这是不可能的。
• @Bud 请在 stackblitz 或 plunker 中复制此问题并提供一些数据
• 您能否展示一下您的数据格式以及您在尝试什么。因为，除非您进一步澄清您的问题，否则很难预测您想要什么？
• 感谢您的回复并提供帮助，抱歉，我有点忙，无法早点回复，我认为 Chris 提供的以下解决方案应该进行一些修改。一旦我尝试过，我会回来的。

Answer 1

根据您所写的内容，我试图了解您在做什么。由于我没有看到你的数据结构，我也猜到了，但我会提供我使用的数据结构。

注意：此解决方案要求您预先计算每个重量并将其放入适当的对象中。对于我的示例，我只是对其进行了硬编码。

2017 年 11 月 6 日更新：与原始海报验证要求后，正在更新 Typescript 文件。

打字稿文件：

colNames = ['Number', 'Weight', 'Value', 'Total Weight'];
selectedBlends = [];

// scaffolded data that should reflect what is coming into the app
incomingData = [
    {
        bales: [
            {
                number: 1,
                weight: 10,
                value: '$10'
            },
            {
                number: 2,
                weight: 20,
                value: '$20'
            }
        ],
    },
    {
        bales: [
            {
                number: 5,
                weight: 50,
                value: '$50'
            },
            {
                number: 6,
                weight: 60,
                value: '$60'
            }
        ],
    },
    {
        bales: [
            {
                number: 9,
                weight: 90,
                value: '$90'
            },
            {
                number: 10,
                weight: 110,
                value: '$110'
            }
        ],
    }
];

constructor() {
    this.processBales(this.incomingData);   // I am passing the scaffolded data here. Likely optional
}

processBales(incomingData: any) {
    for (const data in incomingData) {
        if (incomingData.hasOwnProperty(data)) {
            this.createBalesObject(incomingData[data]);
        }
    }
}

createBalesObject (data) {
    this.selectedBlends.push({
        bales: data.bales,
        totalWeight: this.calculateTotalWeight(data.bales)
    });
}

calculateTotalWeight(bales) {
    let totalWeight = 0;
    for (const bale in bales) {
        if (bales.hasOwnProperty(bale)) {
            totalWeight += bales[bale].weight;
        }
    }
    return totalWeight;
}

HTML 文件：（为简洁起见，我删除了用于创建表格屏幕截图的样式）

<table>
    <thead>
    <tr>
      <th *ngFor="let col of colNames">
        {{col}}
      </th>
    </tr>
    </thead>
    <tbody *ngFor="let blend of selectedBlends">
      <tr *ngFor="let bale of blend.bales; let index=index">
        <td>{{bale.number}}</td>
        <td>{{bale.weight}}</td>
        <td>{{bale.value}}</td>
        <td>
            <span *ngIf="index==1">{{blend.totalWeight}}</span>
        </td>
      </tr>
    </tbody>
</table>

输出表获取两行数据，对权重求和，并将其显示在最后一列中。这就是我认为您在问题中所说的。

最后说明： 此代码假定，根据您的措辞，您一次使用 2 行。如果不是，您需要更改<span> 中的*ngIf