时间戳

首页 > 解决方案 > Angular/Typescript - 解决数组中的异步问题

angular - Angular/Typescript - 解决数组中的异步问题

问题描述

我们有 2 个数组Speisekarte和Essensplan - 我想调用方法printName来打印名称，我从 ID 中获取。

问题是，“名称”总是未定义的。

“错误类型错误：无法读取未定义的属性‘名称’”

如何修复模板中的方法中的异步？

模板（printName(essenName) 中的异步）

<div *ngFor="let i of essensplan"> <br />
  <div><b>Woche : {{i.id}}</b></div> <br />
  <button *ngFor="let id of i.essenProWoche" (click)="print(id)">Gericht 
** {{printName(id)}} ** </button>

零件

ngOnInit() {
  console.log("ngOnInite essensplan.component")
  this.getSpeisekarte();
  this.getEssensplan();

}

printName(id: number) {
  this.essenName = this.speisekarte.find(i => i.id == id ).name

 getSpeisekarte(): void {
  this.essenService.getSpeisekarte()
  .subscribe(speisekarte => this.speisekarte = speisekarte);
}

getEssensplan(): void {
  this.essensplanService.getEssensplan()
    .subscribe(essensplan => this.essensplan = essensplan)

}

标签： angulartypescriptasynchronous

解决方案

我不确定是否可以延迟整个组件，直到两个 HTTP 调用都完成。取而代之的是，您可以修改printName以处理this.speisekarte尚未加载的情况。然后，告诉组件一旦加载就重新加载。

零件

constructor(private changeDetector: ChangeDetectorRef) {}

ngOnInit() {
  console.log("ngOnInite essensplan.component")
  this.getSpeisekarte();
  this.getEssensplan();
}

printName(id: number) {
  const match = this.speisekarte.find(i => i.id == id );
  return match ? match.name : "";
}

getSpeisekarte(): void {
  this.essenService.getSpeisekarte()
  .subscribe(speisekarte => {
    this.speisekarte = speisekarte;
    this.changeDetector.markForCheck();
  });
}

getEssensplan(): void {
  this.essensplanService.getEssensplan()
  .subscribe(essensplan => { 
    this.essensplan = essensplan;
    this.changeDetector.markForCheck();
  });
}

现在，无论 HTTP 请求完成的顺序如何，模板都不会出错（尽管如果getEssensplan在此之前完成，名称将为空白getSpeisekarte

注意：我更改printName为返回一个值，因为这是显示它所必需的

推荐阅读