Angular 2 使用 ngValue 传递对象返回无法读取未定义的属性 ...答案

【问题标题】：Angular 2 passing an object using ngValue returns Cannot read property ... of undefinedAngular 2 使用 ngValue 传递对象返回无法读取未定义的属性 ...
【发布时间】：2017-03-14 20:55:44
【问题描述】：

当我在我的模板中使用它时：

<select [(ngModel)]="selectedCompany" class="form-control">
    <option *ngFor="let company of companies" [ngValue]="company">{{company.Name}}</option>
</select>
{{selectedCompany}}

{{selectedCompany}} 的值为 [object Object]。但是，当我尝试像这样获取selectedCompany 的Name 属性时：

{{selectedCompany.Name}}

我收到以下错误：

异常：未捕获（承诺中）：错误：./HomeComponent 类 HomeComponent 中的错误 - 内联模板：60:10 原因：无法读取未定义的属性“名称”

我想弄清楚为什么会出现这个错误。我认为该属性在那里是因为{{company.Name}} 有效。

【问题讨论】：

标签： angular angular2-template angular2-forms

【解决方案1】：

这是因为selectedCompany 在模板渲染时没有定义。您有两种解决方案：

使用安全导航运算符 (?) 来“保护”您的模板，直到 selectedCompany 填充数据：
```
{{selectedCompany?.Name}}
```
在您的组件中初始化selectedCompany 变量：
```
selectedCompany = {};
```

这两种方法都可以解决问题。

【讨论】：

就是这样，解决了它。谢谢！ :)
@RavenLune 不客气！ :) 我看到你是新来的，所以如果它对你有帮助，请考虑接受并支持我的回答。（我的答案左侧的勾选和向上箭头按钮）
在第二种情况下，名称未定义
@RomanC Name 未定义，但 selectedCompany 未定义。如果您仔细阅读错误，您会发现这就是本例中的问题。