Question

我在HTML元素中有一些很好的逻辑，可以使用if：

在2个选项之间切换属性值

<igx-icon [name]="cell.value=='Modified' ? 'mode_edit' : 'file_upload'"></igx-icon>

如果我有超过2个案例，我是否有类似的选择？我知道我可以：

<div [ngSwitch]="cell.value">
    <igx-icon *ngSwitchCase="Modified" name="mode_edit></igx-icon>
    <igx-icon *ngSwitchCase="Uploaded" name="file_upload"></igx-icon>
    <igx-icon *ngSwitchCase="Third Case" name="thirdOption"></igx-icon>
</div>

但它并不像第一种形式那样直接简短。是否有一个工具可以直接在name属性上完成此操作？

Answer 1

您可以在组件上设置字典以帮助解决此问题：

ExampleComponent {
    igxIconTypes = {
        'Modified': 'name',
        'Uploaded': 'file_upload',
        ...
    };
}

然后您可以在模板中使用它：

<igx-icon [name]="igxIconTypes[cell.value]"></igx-icon>

然后您可以使用||运算符设置默认大小写（其中没有匹配）：

<igx-icon [name]="igxIconTypes[cell.value] || 'default_icon'"></igx-icon>

可以使用开关在Angular中设置HTML元素属性吗？

1 个答案: