Angular 7 - *ngFor 未正确迭代且未考虑解构 object

Question

let package = [{
    "masterPack": [{
        "itemName": "master value",
        "grams": "100",
        "rate": "5",
        "scheme": "ccc"
    }],
    "boostPack": [{
        "itemName": "beginner value",
        "grams": "50",
        "rate": "3",
        "scheme": "ccc"
    }]
}];

尝试1：直截了当

const itemName = package[0].masterPack[0].itemName + ' + ' + package[0].boostPack[0].itemName;
    const grams = Number(res[0].masterPack[0].grams) + Number(res[0].boostPack[0].grams);
    const rate = Number(res[0].masterPack[0].rate) + Number(res[0].boostPack[0].rate);
    const scheme = package[0].masterPack[0].scheme;
    this.mergeAll.push({
        itemName,
        grams,
        rate,
        scheme,
    }, ...this.package[0].masterPack);
    console.error('final', this.mergeAll);

尝试2：for循环

for (let i = 0; i < package[0].masterPack.length; i++) {
    const itemName = package[0].masterPack[i].itemName + ' + ' + package[0].boostPack[i].itemName;
    const grams = Number(res[0].masterPack[i].grams) + Number(res[0].boostPack[i].grams);
    const rate = Number(res[0].masterPack[i].rate) + Number(res[0].boostPack[i].rate);
    const scheme = package[0].masterPack[i].scheme;
    this.mergeAll.push({
        itemName,
        grams,
        rate,
        scheme,
    }, ...this.package[0].masterPack);
    console.error('final', this.mergeAll);
}

在这里，我试图显示两个 div 如下

  <div *ngFor="data of mergeAll">
            <div class="one">
                special offer: master Edition + beginner value // ex: masterPack.itemName + '+' addOnPack.itemName
                total grams : 107 // ex: masterPack.grams + '+' addOnPack.grams
                total price(no gst) : Rs 8 // ex: masterPack.rate + '+' addOnPack.rate
                you purchased under : ccc ex: masterPack.scheme
            </div>
            <div class="two">
        
                Default offer: master Edition // ex: masterPack.itemName
                total grams : 107 // ex: masterPack.grams
                total price(no gst) : Rs 8 // ex: masterPack.rate
                you purchased under : ccc ex: masterPack.scheme
            </div>
        </div>

问题：我可以在 this.mergeAll 中看到两个对象，但如果使用*ngFor = "data in mergeAll" ，它不能正确地迭代值。 意思是，它没有考虑...this.package[0].masterPack

有人能告诉我如何简化上述两次失败的尝试来实现 output。

谢谢

Answer 1

您必须首先定义数据变量，并使用of而不是in ：

<div *ngFor="let data of mergeAll">
        <div class="one">
            special offer: master Edition + beginner value // ex: masterPack.itemName + '+' addOnPack.itemName
            total grams : 107 // ex: masterPack.grams + '+' addOnPack.grams
            total price(no gst) : Rs 8 // ex: masterPack.rate + '+' addOnPack.rate
            you purchased under : ccc ex: masterPack.scheme
        </div>
        <div class="two">
    
            Default offer: master Edition // ex: masterPack.itemName
            total grams : 107 // ex: masterPack.grams
            total price(no gst) : Rs 8 // ex: masterPack.rate
            you purchased under : ccc ex: masterPack.scheme
        </div>
    </div>

Answer 2

以下内容应该适合您。

<div *ngFor="let data of packag; let i = index" class="special">
  <h1>Special Offer</h1>
    <div>
    Special Offer: {{data.masterPack[i].itemName}} {{data.boostPack[i].itemName}}
    </div>
  <div>
    Total grams: {{sumNumbers(data.masterPack[i].grams, data.boostPack[i].grams)}}
    </div>
  <div>
    Total price(no gst): {{sumNumbers(data.masterPack[i].rate, data.boostPack[i].rate)}}
    </div>
  <div>
    You purchased under: {{data.masterPack[i].scheme}}
    </div>
  </div>

<div *ngFor="let data of packag; let i = index" class="base">
  <h1>Base Offer</h1>
    <div>
    Special Offer: {{data.masterPack[i].itemName}}
    </div>
  <div>
    Total grams: {{data.masterPack[i].grams}}
    </div>
  <div>
    Total price(no gst): {{data.masterPack[i].rate}}
    </div>
  <div>
    You purchased under: {{data.masterPack[i].scheme}}
    </div>
</div>

component.ts 中的方法

sumNumbers(a, b) {
    return Number(a) + Number(b);
  }

如果您想要单个数组，下面的循环将为特价和基本报价创建单个集合。

for (let i = 0; i < this.packag[0].masterPack.length; i++) {
    let itemName = this.packag[0].masterPack[i].itemName + ' + ' + this.packag[0].boostPack[i].itemName;
    let grams = Number(this.packag[0].masterPack[i].grams) + Number(this.packag[0].boostPack[i].grams);
    let rate = Number(this.packag[0].masterPack[i].rate) + Number(this.packag[0].boostPack[i].rate);
    let scheme = this.packag[0].masterPack[i].scheme;
    this.mergeAll.push({
        itemName,
        grams,
        rate,
        scheme,
    });
    itemName = this.packag[0].masterPack[i].itemName;
    grams = Number(this.packag[0].masterPack[i].grams);
    rate = Number(this.packag[0].masterPack[i].rate);
    scheme = this.packag[0].masterPack[i].scheme;
    this.mergeAll.push({
        itemName,
        grams,
        rate,
        scheme,
    });

模板

<div *ngFor="let data of mergeAll" class="base">
  <h1>{{data.rowType}}</h1>
    <div>
    Special Offer: {{data.itemName}}
    </div>
  <div>
    Total grams: {{data.grams}}
    </div>
  <div>
    Total price(no gst): {{data.rate}}
    </div>
  <div>
    You purchased under: {{data.scheme}}
    </div>
</div>

Stackblitz 链接

https://stackblitz.com/edit/angular-ivy-fxztwk?embed=1&file=angular.json

Answer 3

这是另一种方式，以防您只想通过使用ngFor和键值pipe来显示包而不更新传输数据

<ng-container *ngFor="let data of package">
    <div *ngFor="let v of data | keyvalue;">
        <h3>
            {{v.key}}
        </h3>
        <ng-container *ngIf="v.value[0] as item">
            <div>
                <div>
                    itemName : {{item.itemName}}
                </div>
                <div>
                    grams : {{item.grams}}
                </div>
                <div>
                    rate :{{item.rate}}
                </div>
                <div>
                    scheme : {{item.scheme}}
                </div>
            </div>
        </ng-container>
    </div>
</ng-container>

这一行<ng-container *ngIf="v.value[0] as item">只是为 v.value[0] 创建一个变量，所以我不需要继续写v.value[0]. .

另一点我的回答只是表明可以使用ngFor和keyvalue pipe 来显示package所以这可能有助于简化你的逻辑

stackblitz 演示