如何在 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 模板中使用这个模型？

Answer 1

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

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

那应该有效。