Angular 7 - * ng За неправильное выполнение итерации и без учета деструктурированного объекта

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

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

Может ли кто-нибудь сказать мне, как упростить две вышеупомянутые неудачные попытки добиться результата?

Answer 1

Сначала необходимо определить переменную данных и использовать из вместо в :

<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);
  }

Если вы хотите иметь единственный массив, приведенный ниже l oop создаст одиночный коллекция для специального и базового предложения.

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 , так что это может помочь вам упростить logi c

демонстрация stackblitz ?