Передача данных между компонентами и использование ngDocheck

Question

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

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();
    //  ........

Наш HTML выглядит следующим образом:

<div *ngIf="showGlobalError">
  <h6>The reporting project doesn't have any Shippable Items</h6>
</div>
<div id="search-block" class="box-shadow-block">
   <span>Reporting Project</span>
   <dx-select-box
     [items]="reportingProject"
     [text]="reportingProject"
     [readOnly]="true"
     >
   </dx-select-box>
</div>

Проблема заключается в том, что в окне выбора появляется номер проекта отчетности, но когда я нажимаю на поле выбора и щелкаю в любом другом месте страницы, номер проекта исчезает.Я не уверен, что это как-то связано с ngDoCheck ().Любая помощь с благодарностью

Answer 1

используйте следующий код для получения данных из службы.

this.psService.tDate.subscribe(x => {this.cachedResults = x},
    (err) => {},
    () => {this.checkForCachedResults()}
);

и напишите функцию для выполнения вашей условной проверки вместо doCheck (), как следует

checkForCachedResults() {
    if (this.cachedResults.length > 0 && this.count <= 1) {
        this.showGlobalError = false;
        this.populateArrays();
        this.count++;
    }
} 

Answer 2

сначала установите для вашего showGlobalError значение false и выполните логику в вашем ngOnInit.

showGlobalError = false;

в вашем представлении:

<div *ngIf="showGlobalError">
  <h6>The reporting project doesn't have any Shippable Items</h6>
</div>
<div *ngIf="!showGlobalError" id="search-block" class="box-shadow-block">
   <span>Reporting Project</span>
   <dx-select-box
     [items]="reportingProject"
     [text]="reportingProject"
     [readOnly]="true"
     >
   </dx-select-box>
</div>