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运算符

2 个答案: