angular - 如何在 Angular 组件的 HTML 模板端使用联合类型

Question

在 Angular 组件的 HTML 部分，我想在不同的条件下显示一个复选框或一个图标。使用许可模型{ checked?: boolean; icon?: string }，我可以这样做：

<input type="checkbox" [(ngModel)]="item.checked" *ngIf="!item.icon">
<i class="{{item.icon}}" *ngIf="item.icon">

此模型启用无效状态，例如同时具有checked和icon。拥有更强大的模型可能依赖于联合类型：{ checked: boolean } | { icon: string }. 但它在 HTML 中不再起作用，因为在“联合类型”级别checked也没有icon可用，而仅适用于左或右大小写。

有没有办法在一些经过调整的 HTML 模板中使用这个模型？

标签： angulartypescript

Answer 1

有点晚了，但我现在有类似的问题。如果找到了解决方案，但它不是很优雅。我希望有更好的东西......您可以将您的项目包装在 $any() 运算符中，如下所示：

<input type="checkbox" [(ngModel)]="$any(item).checked" *ngIf="!item.icon">
<i class="{{$any(item).icon}}" *ngIf="item.icon">

那应该行得通。