angular - *ng用于显示数据但抛出 'undefined'错误

Question

我有一个 *ngFor 指令，它按预期运行并在我的浏览器中显示数据。尽管我的 chrome 控制台显示“未定义”错误。

http.service.ts:

getExerciseProgress(exId: number): Observable<Exercise> {
    return this.http.get<Exercise>(this.baseURL + 'exercises/GetProgressionByExerciseId/' + exId)
  }

查看-exercise.component.ts:

 exercise: Exercise;

  constructor(private http: HttpService) { }


  ngOnInit() {
    this.http.getExerciseProgress(7).subscribe(ex =>{
      this.exercise = ex;
      console.log(this.exercise);
    });
  }

作为参数传递的 7 用于测试目的，当我记录结果时，该对象似乎是我正在寻找的对象。带有嵌套 Progress 数组的练习对象。

查看-exercise.component.html:

<p *ngFor="let p of exercise.progress">{{ p.bpm }}</p>

上面一行是在我的 Chrome 控制台窗口中抛出以下消息的那一行。 “错误类型错误:无法读取未定义的属性‘进度’”。尽管如此，我的浏览器仍显示正确的信息。

客户端模型(以防万一):

export class Exercise {

id: number;
description: string;
progress: Progress[];

constructor(id: number, description: string, progress: Progress[]){
    this.id = id;
    this.description = description;
    this.progress = progress;
}

export class Progress {

id: number;
dateAttempted: Date;
bpm: number;

constructor(id: number, dateAttempted: Date, bpm: number){
    this.id = id;
    this.dateAttempted = dateAttempted;
    this.bpm = bpm;
}

}

提前致谢

Answer 1

这是一个竞争条件:当模板第一次加载时，this.exercise还在undefined .然后，一旦 Observable 解析并分配了一个值，一个 change detection cycle被触发，*ngFor运行，您会看到值。

有两种典型的模式可以解决这个问题:

使用 elvis operator (在您的情况下可能是最好的，因为您只有一个访问器):

<p *ngFor="let p of exercise?.progress">{{ p.bpm }}</p>

?.表示“如果定义了左侧的操作数，则访问此运算符右侧的属性”。这样写，很明显可以链接起来: exercise?.progress?.timer?.started
或者在容器元素上使用保护，当您有很多访问器并且不想重复时，这会更好 ?.到处:

<ng-container *ngIf="exercise">
  <p *ngFor="let p of exercise.progress">{{ p.bpm }}</p>
<ng-container>

在上面的例子中，我使用了 <ng-container />因为它没有被渲染到 DOM 中，但是你可以很容易地在真实元素上使用它，比如 <div /> .这是 *ngIf="exercise; else no-data"中常用的模式，其中 #no-data是另一个 ng-template，它在您加载数据时替换 div。

仅供引用，因为 Angular 使用 polyfills，你可以安全地使用 template strings在你的 typescript 中。意思是，你可以写

this.baseURL + 'exercises/GetProgressionByExerciseId/' + exId

作为

`${this.baseURL}/exercises/GetProgressionByExerciseId/${exId}`

有些人觉得这更容易阅读。