Angular2，子属性和 elvis 运算符

Question

所以我有一个来自服务器的复杂日期模型来提供我的 Angular2 组件。以下显示了该组件模板的一小部分：

<div>
    <span>{{Person.Address.City}}</span>
    <input type="text" [(ngModel)]="Person.Address.City" />
</div>

Address 可能是 null 或 undefined，具体取决于从服务器返回的数据。我知道 elvis 运算符将使我免于一个错误：

<span>{{Person?.Address?.City}}</span>

但不幸的是，它不会为 [(ngModel)]="Person.Address.City" 节省我的时间，因为没有为此定义猫王。如果你做类似 [(ngModel)]="Person?.Address?.City" 的事情，你会得到一个解析器错误，如果你不这样做，你会得到 null 异常。

这里有两个最简单的数据变体，尽管还可以有更多：

{
    Name:'sam',
    LastName: 'jones',
    Address: {
        Street: '123 somewhere',
        City: 'some land'
        State: 'SL'
    }
}

或...

{
    Name:'sam',
    LastName: 'jones'
}

既然处理这些场景的责任应该在 Angular2 而不是提供数据的服务器上，由于表示和业务逻辑的分离，我将如何处理这些场景？

Answer 1

事实证明，您要么维护 3 个模型，一个用于前端 (Angular2)，一个用于中间层（ASP.NET、JAVA，等等...），另一个为您的数据模型。或者您可以像我一样确保您的中间层模型不会有空的复杂对象。这意味着在你的模型中初始化复杂的属性并摆脱 2 个模型。

另请注意，如果您没有或不能修改您的中间层模型，那么您唯一的选择是为您的前端 (Angular2) 创建一个兼容模型，并在必要时合并数据已从 API、服务等返回。

Answer 2

在服务级别，您可以为地址添加一个空白对象。收到回复后立即。这样您就可以在整个应用程序的源头解决问题。

这是使用 RxJS 的简单解决方案：

this._http.get(url)
    .map(res => res.json())
    .map(res => {
        if (res.Address === null || res.Address === undefined) {
            res.Address = {}
        }
        return object;
    });

如果 Address 对象为空，您可能还需要考虑在保存之前删除它。

Angular2，子属性和 elvis 运算符

Angular2, child properties and elvis operator

javascript

typescript

angular2-http

angular