即使绑定有效，也无法读取属性未定义错误

Question

因此，我的 Web 应用程序中有一个下拉菜单，我连接到我的服务 api 调用，它将使用位置列表填充下拉菜单。

我创建了服务并使用 httpclient 设置了 Observable。

然后我调用服务来获取 api 调用的结果并绑定到我的位置属性。

例如在 ngOnInit() 内的 component.ts 文件中，我有这个：

ngOnInit() {
    this._transactionService.getLocations('User').subscribe(data => this.location = data);
    }

在我的 component.html 文件中：

<select [ngModel]="null" formControlName="location">
            <option value="null" disabled selected>{{'SelectLocation' | translate}}</option>
            <option *ngFor="let store of location._storeList" [ngValue]="store._storeKey">{{ store._storeName }}</option>
        </select>

当我加载页面时，我短暂地注意到，它加载奇怪的时间只有几分之一秒，然后自行更正并正确加载。我检查了我的下拉菜单，发现它正确地绑定了我想要的位置列表，我能够 select 它就好了。看起来不错！但是，当我检查元素 > 控制台时，我看到了这个错误：

ERROR TypeError: Cannot read property '_storeList' of undefined
    at Object.eval [as updateDirectives] (PortalComponent.html:11)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14651)
    at checkAndUpdateView (core.js:13798)
    at callViewAction (core.js:14149)
    at execComponentViewsAction (core.js:14081)
    at checkAndUpdateView (core.js:13804)
    at callViewAction (core.js:14149)
    at execEmbeddedViewsAction (core.js:14107)
    at checkAndUpdateView (core.js:13799)
    at callViewAction (core.js:14149)

因此，虽然绑定和结果工作正常，但我不确定为什么会出现控制台错误。我认为这与 ngOnInit() 的 Angular 生命周期有关，但我不确定如何正确解决此问题。我应该调用我的服务而不是 ngOnInit() 或其他地方吗？解决此问题的最佳做法是什么？

Answer 1

因为location是异步加载，所以使用，是undefined第一次Angular加载执行模板。

解决方案是使用 Safe Navigation（又名 elvis ?.）运算符：

<option *ngFor="let store of location?._storeList" [ngValue]="store._storeKey">{{ store._storeName }}</option>

即使绑定有效，也无法读取属性未定义错误

Cannot read property of undefined error even though the binding is working

typescript

ngoninit

angular

即使绑定有效，也无法读取 属性 未定义错误

Cannot read property of undefined error even though the binding is working

typescript

ngoninit

angular

即使绑定有效，也无法读取属性未定义错误