Angular ChangeDetection не отображает правильные данные

ouatrahim спросил: 03 ноября 2018 в 09:09 в: javascript

Я столкнулся с ситуацией, которую не могу разрешить. Мой проект использует угловую версию 6. У меня есть форма, отображаемая как таблица с использованием 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 не работает.

Кто-нибудь знает, что не так в том, что я делаю?!

Спасибо


0 ответов