首页 文章

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

提问于
浏览
0

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

从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>

以这种方式我有多个<td>,因此嵌套数组中的每个元素占用两行来单独显示它们的数据,这就是我想要的 .

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

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

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

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

1 回答

  • 0

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

    注意:此解决方案要求您预先计算每个重量并将其放入正确的物体中 . 对于我的例子,我刚刚硬编码了 .

    UPDATE 11/6/2017: After verifying the requirements with the original poster, the Typescript file is being updated.

    Typescript file:

    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 file: (为了简洁起见,我删除了用于创建表格截屏的样式)

    <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>
    

    输出表获取两行数据,对权重求和,并在最后一列中显示 . 这就是我认为你在问题中说的话 .

    enter image description here

    Final Note: 此代码假定,根据您的措辞,您一次使用2行 . 如果不是,你需要更改 <span> 中的 *ngIf

相关问题