Javascript 无法读取属性'；状态'；函数实际工作之前的未定义错误？

我正在使用一个下拉列表，Angular的[selected]标记似乎给我带来了一些问题

看起来，虽然我的代码返回了我所期望的一切，将显示的下拉值与我事件的当前状态相匹配，但它抛出了一个错误，声明：

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

也许它试图在有机会实际查看之前为[selected]赋值？开小差

html

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

此.event是一个具有以下组成的对象：

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

---

尝试如下扩展您的

isCurrent

功能：

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

---

似乎

事件

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

您应该避免在模板中调用方法，因为在每次更改检测时都会调用这些方法。改用变量。您得到的错误是，

事件

似乎是

未定义的

，因此它无法读取

状态

。您可以通过在组件中初始化来解决此问题：

event = <IEvent>{};

event={}；

正如我建议的，使用变量代替。您可以使用以下选项：

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

{{x.name}

似乎在event获得任何值之前，它就开始将status与event.status进行比较。您首先在哪里为

此.event设置值？如果它在
选项
之后的
长度
>为0，则此错误完全有意义。不相关，但不应在模板中调用方法。它们在每次变更检测上运行，这是非常常见的。在最坏的情况下，您可能会进入一个似乎是无限循环的循环。所以在模板中使用变量：）啊哈！你给了我灵感@Artem。我用do
if（this.event）{returnthis.event.status===status}returnfalse对它进行了排序
@physicsboy实际上我在这段代码中也做了同样的事情，但是使用了更短的表达式。后来我在包含html组件中使用了
*ngIf=“event？”.status“
，实际上我也使用了类似的方法，在包含html组件中使用了
*ngIf=“event？”.status“
，当然你也可以这样做！我自己发现，如果可以的话，初始化变量以避免不必要的
*ngIf
，是一种很好的做法。我想这是一个意见问题，而且如果您想在填充数据之前隐藏内容：）
<select>
  <option *ngFor="let x of options" [selected]="x.name === event.status">
    {{x.name}} 
  </option>
</select>