无法读取未定义的属性'status' - 函数实际工作之前出错？

Question

我正在使用一个下拉列表，而 Angular 的 [选择] 标签似乎给我带来了一些问题......

看起来，尽管我的代码带回了我期望的所有内容，将显示的下拉值与事件的当前状态相匹配，但它会抛出一个错误，指出：

错误

类型错误：无法读取未定义的属性"状态">

也许它试图在有机会实际查看之前为 [selected] 分配一个值？跳枪一点？

.html

<select>
<option *ngFor="let x of options" [selected]="isCurrent(x.name)">{{x.name}}</option>
</select>

元件

isCurrent(status: string): boolean {
return this.event.status == status;
}

this.event 是一个带有 makeup 的对象：

export interface IEvent extends IEntity {
date: Date;  //  YYYY-MM-DD'T'HH:MM:ss.SSSZ
status: string;
stage: IEntity;
entrants?: IEntrant[];
}

Answer 1

尝试像这样扩展isCurrent函数：

isCurrent(status: string): boolean {
// firstly check that event exists
return this.event && this.event.status == status;
}

似乎event在开始时未定义或为 null，并且在第一次检查运行之后异步获取值。

Answer 2

应避免在模板中调用方法，因为它们在每次更改检测时都会调用。请改用变量。您得到的错误是似乎eventundefined，因此无法读取status。您可以通过在组件中初始化它来解决这个问题：

event = <IEvent>{};

也像我建议的那样，改用变量。您可以使用它：

<select>
<option *ngFor="let x of options" [selected]="x.name === event.status">
{{x.name}} 
</option>
</select>