Question

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

从2D矩阵（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>

以这种方式我有多个＆lt; td＆gt;，因此嵌套数组中的每个元素占用两行来单独显示它们的数据，这就是我想要的。

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

无论如何都要访问* ngFor循环的当前索引位置的各个元素值？或者类似下面的代码？

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

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

Answer 1

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

注意：此解决方案要求您预先计算每个重量并将其放入适当的物体中。就我的例子而言，我刚刚对其进行了硬编码。

更新11/6/2017：在使用原始海报验证要求后，正在更新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行。如果不是，则需要更改*ngIf

中的<span>

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

1 个答案: