javascript - 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" 保存我，因为没有为此定义 elvis。如果你做类似 [(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、服务等。