Как использовать таблицу материалов с асин c трубой и обнаружение изменений? (Не работает правильно)

Question

Я потратил целых 3 дня, пытаясь выяснить это.

Ожидаемое поведение: Таблица материалов всегда отображается с большинством текущих данных из бэкэнда. Когда новый элемент добавляется в таблицу из отдельного компонента, при перенаправлении маршрутизатора на страницу отображаются обновленные данные.

Фактическое поведение: При первом переходе на страницу таблица пуста. Таблица выводится, заголовки столбцов отображаются, но строки не заполняются. Отойдя и вернувшись назад, стол заполнится правильно. При добавлении нового элемента в таблицу служба отправляет элемент в серверную часть, а затем выполняет вызов для всех элементов. Затем служба обновляет магазин (другой сервис). При перенаправлении на компонент таблицы таблица, кажется, быстро обновляет sh старые данные, а затем снова становится пустой. Как только я ухожу и возвращаюсь назад, таблица загружена должным образом.

Я использую канал asyn c ниже со службами. Мне это не кажется правильным ... кроме того, ngOnChanges ничего не регистрирует.

appStore.service.ts

private _pets: ReplaySubject<Pet[]> = new ReplaySubject(1);
public readonly pets: Observable<Pet[]> = this._pets.asObservable();
getPets(): Observable<Pet[]> {
    return this.pets;
}

appDispatch.service. ts

public getPets(): Observable<Pet[]> {
    return this.appStore.getPets();
}

private setPets(pets: Pet[]) {
    this.appStore.setPets(pets);
}

petTableComponent.component.ts

...
changeDetection: ChangeDetectionStrategy.OnPush

constructor(private appDispatch: AppDispatchService,
              private router: Router) {
}

ngOnChanges(changes: SimpleChanges): void {
    console.log(changes.value.currentValue);
}

petTableComponent.component. html

<table
  mat-table
  [dataSource]="appDispatch.getPets() | async" multiTemplateDataRows
  class="mat-elevation-z8">

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef scope="col" [attr.role]="null"> <h4>Name</h4></th>
      <td mat-cell *matCellDef="let element" scope="row" [attr.role]="null">
        <p>{{element.pet.name}}</p>
      </td>
    </ng-container>
    ...

РЕДАКТИРОВАТЬ Я пытался изменить следующее для каждого запроса, точно такой же результат, как и раньше.

//changeDetection: ChangeDetectionStrategy.OnPush

pets-table.component.ts

constructor(private appDispatch: AppDispatchService,
              private router: Router,
              private cdr: ChangeDetectorRef) {
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes.value.currentValue());
  }

  ngOnInit(): void {
    this.subscription = this.appDispatch.getReleaseItems()
      .subscribe(value => {
        this.data = value;
        this.cdr.detectChanges();
      });
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

И я изменил источник данных на [dataSource]="data"

Не уверен ...

Answer 1

Попробуйте сохранить наблюдаемое в компоненте

pets$: Observable<Pet[]> = this.appDispatch.getPets();

<table
  mat-table
  [dataSource]="pets$ | async" multiTemplateDataRows
  class="mat-elevation-z8">

Answer 2

это потому, что вы установили ChangeDetectionStrategy.OnPush это означает, что ваш компонент думает, что вы полагаетесь только на свои атрибуты @input, поэтому обнаружение изменений происходит только при изменении этих значений или при возникновении события объекта DOM из компонента или его дочерних элементов. .

посмотрите на эту статью, которая дает действительно хорошее объяснение с примерами: https://netbasal.com/a-comprehensive-guide-to-angular-onpush-change-detection-strategy-5bac493074a4

вы также можете запустить обнаружение изменений вручную:

constructor(private cdr: ChangeDetectorRef, private appDispatch: AppDispatchService) {
  ......
  this.appDispatch.Pets.subscribe(() => {
    this.cdr.detectChanges();  
  })
  

}