ngFor - после первоначального отображения массив модифицируется, но изменения не отображаются в поле зрения

У меня есть массив, который возвращается с сервера и отображает элементы с помощью *ngFor в таблице. После того, как я обработаю выбранный элемент, я удалю его из массива. Представление не удаляет удаленный элемент автоматически. Однако, если щелкнуть функцию сортировки в заголовке таблицы, удаленный элемент будет удален из представления. Я знаю, что мне нужно уведомить представление о том, что массив был изменен, даже если массив был обновлен внутри. Но я не мог найти способ заставить его работать. Я надеюсь, что кто-то может дать мне подсказку. Спасибо.

Patient.ts
    public _records: Array<CRCasesLite>;

    constructor(private router: Router, 
                private route: ActivatedRoute) {
                this._records = this.route.snapshot.data['crCasesLite'];
    }

    onActivateRecord(record: CRCasesLite, index: number): void {
        ...
        if (index > -1) {
                    this._records.splice(index, 1);;
        }
    }


Patients.html
    <th class="input-sm">Patient <a (click)="oby=['PatientName']" class="fa fa-caret-up fa-2x"></a>  <a (click)="oby=['-PatientName']" class="fa fa-caret-down fa-2x"></a></th>

    <tr *ngFor="let record of _records | orderBy : oby ? oby : ['']; let i = index; trackBy:index">
       <td class="input-sm">{{record.PatientName}} {{record.Id}}</td>
       <td><a class="link btn btn-primary fa fa-plus-square" (click)="onActivateRecord(record, i)"></a></td>

arrays ngfor
person Paul    schedule 26.09.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Представление должно быть уведомлено об изменениях в массиве. Для этого мы могли бы использовать ChangeDetectorRef и ChangeDetectorRef.markForCheck(). Спасибо за то, что Мардж Райкок упомянул о detechChanges() в своих ответах на Angular 2 - представление не обновляется после изменения модели Angular 2 — представление не обновляется после изменения модели и статью Паскаля Прехта об обнаружении изменений в Angular 2 http://blog.thoughtram.io/angular/2016/02 Статья Precht очень подробная и достаточно простая для понимания.

Это изменения кода, которые я сделал, чтобы обновленный массив отражался в * ngFor в

Patient.ts

import {  ChangeDetectorRef  } from "@angular/core";   // <--- added

public _records: Array<CRCasesLite>;

constructor( private cd: ChangeDetectorRef    // <--- added
             ... ) {
            this._records = this.route.snapshot.data['crCasesLite'];
}

onActivateRecord(record: CRCasesLite, index: number): void {
    ...
    if (index > -1) {
        this._records.splice(index, 1);
        this.cd.markForCheck();     // <--- added      
    }
}

Пациенты.html

<table>
    <th class="input-sm">Patient <a (click)="oby=['PatientName']" class="fa fa-caret-up fa-2x"></a>  <a (click)="oby=['-PatientName']" class="fa fa-caret-down fa-2x"></a></th>
    <th></<th>
    <tr *ngFor="let record of _records | orderBy : oby ? oby : ['']; let i = index; trackBy:index">
          <td class="input-sm">{{record.PatientName}} {{record.Id}}</td>
          <td><a class="link btn btn-primary fa fa-plus-square" (click)="onActivateRecord(record, i)"></a></td>
    </tr>
</table>
person Paul    schedule 28.09.2016

arrow_upward
0
arrow_downward

если используется provider:[], убедитесь, что вы не используете provider[] в каждом компоненте. Если для всех компонентов требуется один и тот же экземпляр, укажите provider[] только в родительском компоненте.

person user8109050    schedule 09.06.2021