角度-数据绑定变量是否应在构造函数中初始化？

Question

我在Angular2项目中继承了一些遵循以下模式的代码：

<input type="text [(ngModel)]="selectedResource.url">

组件构造函数如下，其中loadResources（）是一个异步方法，它将初始化selectedResource：

constructor() {
    this.loadResources();
}

我遇到的问题是，由于async方法完成之前selectedResource为null，所以页面加载并且angular开始抛出很多错误，抱怨selectedResource为null，直到async方法完成，然后一切正常。 / p>

为避免出现异常，我看到了两种解决方案-首先，将html更改为以下内容，以告诉angular检查是否为空。

<input type="text [ngModel]="selectedResource?.url" (ngModelChange)="selectedResource.url = $event">

或者，我可以在页面构造函数中初始化selectedResource。网址最初会以空字符串的形式加载到页面上，但这没关系，因为async方法几乎是即时运行的，用户不会注意到。

constructor() {
    this.selectedResource = new Resource();
    this.loadResources();
}

是否存在用于初始化数据绑定变量的最佳实践？每种方法的优缺点是什么？

Answer 1

使用安全的导航操作符?.等待asynchronous事件完成。

<input type="text [ngModel]="selectedResource?.url" (ngModelChange)="selectedResource.url = $event">

何时使用安全导航操作符？

如果要访问asynchronous内的template对象，则实际上不必将object初始化为empty。因为?.是为此目的（在.ts文件或类中不起作用）。如果要在组件（.ts）中访问它，请先null检查是否有数据，然后可能必须将其初始化为empty对象。