Угловая директива ngIf не работает должным образом

Question

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

<div *ngIf="showGlobalError">
      <h6>The reporting project doesn't have any Shippable Items</h6>
  </div>

, а component.ts похож на

showGlobalError = true;
constructor(private psService: ProjectShipmentService, private pdComp: ProjectDetailsComponent) {
    this.psService.tDate.subscribe(x => this.cachedResults = x);
  }
  ngOnInit() {    }

  ngDoCheck() {
    if (this.cachedResults.length > 0 && this.count <= 1) {
        this.showGlobalError = false;
        this.populateArrays();
        this.count++;
      }
  }    
  populateArrays() {
    this.reportingProject = [this.pdComp.rProjectNumber];
    this.projectSalesOrder = this.pdComp.rSalesOrder;
    this.clearFilter();
  ........

Проблема в том, что в this.cachedResults есть данныето есть this.cachedResults.length в течение нескольких секунд не равен «0». «Отчетный проект не имеет отправляемых элементов» отображается на странице, а затем показывает данные, которые я не уверен, если это что-то с помощью ngDoCheck ()вызывает это.Любая помощь с благодарностью

Answer 1

Вместо подписки в коде вы можете использовать асинхронный канал в своем шаблоне

items$ = this.psService.tDate;

showGlobalError$ = this.items$.pipe(map(results => !results || !results.length));

constructor(private psService: ProjectShipmentService, private pdComp: ProjectDetailsComponent) { }

и в своем шаблоне

<div *ngIf="showGlobalError$ | async">
  <h6>The reporting project doesn't have any Shippable Items</h6>
</div>

<ng-template *ngFor="let item of items$ | async">
  Do stuff with {{item | json}}
</ng-template>

Это управляет вашей подпиской для вас и исправляет памятьутечка в вашем коде с подпиской, от которой вы не отмените подписку.

Взгляните на библиотеку, которую я написал для такого рода вещей, значительно упростите кеширование данных.https://medium.com/@adrianbrand/angular-state-management-with-rxcache-468a865fc3fb

Answer 2

Поскольку значение по умолчанию showGlobalError равно true, при загрузке страницы отображается сообщение об ошибке.

Пожалуйста, установите для него значение по умолчанию false и установите значение true, если this.cachedResults.length равно 0 или * 1006.* is undefined или this.cachedResults is null.

Надеюсь, это решит вашу проблему.