2

所以我有一个来自服务器的复杂日期模型来提供我的 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 而不是提供数据的服务器上，由于表示和业务逻辑的分离，我将如何处理这些场景？

4

2 回答 2

0

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

另请注意，如果您没有或无法修改中间层模型，那么您唯一的选择是为您的前端（Angular2）创建一个兼容的模型，并在数据从 API 返回后根据需要合并，服务等。

于 2016-04-25T21:08:04.827 回答
0

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

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

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

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

于 2016-11-11T15:04:11.870 回答