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

【问题标题】：Passing data between components and use the ngDocheck在组件之间传递数据并使用 ngDocheck
【发布时间】：2019-09-27 01:47:16
【问题描述】：

我们正在尝试将数据从一个组件传递到另一个组件，下面是我们正在采用的方法。当没有数据时，我们希望显示错误消息，如果有数据，我们会在选择框中显示。

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() 有关。非常感谢任何帮助

【问题讨论】：

标签： javascript angular typescript angular7

【解决方案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>

【讨论】：

【解决方案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++;
    }
}

【讨论】：