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

首先将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>

Answer 2

使用以下代码从服务中获取数据。

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++;
    }
}

在组件之间传递数据并使用ngDocheck

2 个答案: