Angular ChangeDetection不顯示正確的數據

Question

我遇到了我無法解決的情況。 我的項目使用的是angular6。我使用ngFor在表格中顯示了表格，並且可以在表格中添加行。

<table class="table">
    <thead>
        <tr>
            <th>Prestations</th>
            <th>Unité</th>
            <th>Prix</th>
            <th>Pourcentage Promotionnel</th>
            <th>Activez la promotion?</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let prestation of listPrestations">
            <td class="centering">
                <strong>
                    {{ prestation.prestation.label }}
                </strong>
            </td>
            <td class="centering">
                <strong>
                    {{ prestation.prestation.unite || 'Non défini' }}
                </strong>
            </td>
            <td>
                <div class="input-group" required>
                    <input type="number" step=0.1 [(ngModel)]="prestation.pricePerUnit" id="prestation-pricePerUnit-{{prestation.prestation.id}}" name="pricePerUnit" class="input-field righting" min=0 placeholder="Prix unitaire" required>
                    <label class="input-label" for="pricePerUnit">Prix unitaire</label>
                </div>
            </td>
            <td>
                <div class="input-group">
                    <input type="number" step=1 [(ngModel)]="prestation.promoPercentage" id="prestation-promoPercentage-{{prestation.prestation.id}}" name="promoPercentage" min=0 max=99 class="input-field righting" placeholder="Pourcentage Promotionnel">
                    <label class="input-label" for="promoPercentage">Pourcentage Promotion</label>
                </div>
            </td>
            <td class="centering">
                <input type="checkbox" [(ngModel)]="prestation.promoActivated" id="prestation-promoActivated-{{prestation.prestation.id}}" name="promoActivated" class="" placeholder="">
            </td>
            <td class="centering">
                <button class="btn btn-danger" (click)="deletePrestation(prestation.prestation.id)"><i class="fa fa-trash"></i></button>
            </td>
        </tr>
    </tbody>
</table>

給了這樣的東西

但是當我在數組中添加一行時

add(prestationId: number) {
    var x: ICompanyPrestation[] = [];
    this.tmpPrestation = new CompanyPrestation();
    this.tmpPrestation.company = JSON.parse(JSON.stringify(this.company));
    this.tmpPrestation.prestation = this.prestations.find(prestation => prestation.id == prestationId);
    if (!this.listPrestations.find(prestation => prestation.prestation.id == prestationId)) {
        this.listPrestations.push(this.tmpPrestation);
    } else {
        this.isAlreadyIn();
    }
}

我可以看到該數組包含正確的數據，但好像原始輸入在該數組中顯示為0“ pricePerUnits”，或者在屏幕上顯示為“ Prix”

。

就像changeDetection不起作用一樣。

有人知道我在做什么錯嗎？！

謝謝

Answer 1

Angular沒有使用正確的跟蹤來獲取數據。

添加自定義跟蹤功能。

<tr *ngFor="let prestation of listPrestations; trackBy: customTB">

customTB(item, index) {
  return `${index}-${item.id}`;
}

Answer 2

您可以通過調用detectChages手動啟動更改檢測

add(prestationId: number) {
    var x: ICompanyPrestation[] = [];
    this.tmpPrestation = new CompanyPrestation();
    this.tmpPrestation.company = JSON.parse(JSON.stringify(this.company));
    this.tmpPrestation.prestation = this.prestations.find(prestation => prestation.id == prestationId);
    if (!this.listPrestations.find(prestation => prestation.prestation.id == prestationId)) {
        this.listPrestations.push(this.tmpPrestation);
    } else {
        this.isAlreadyIn();
    }


    this.changeDetector.detectChanges();

}

還要將其注入構造函數中

constructor(
    private changeDetector: ChangeDetectorRef,
) {

Answer 3

我終於發現了！

似乎我的命名約定中關於“ id”，“ name”等存在錯誤，足以產生錯誤。

謝謝