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

Question

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

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

<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>

但它不像第一种形式那样简短直接。有没有工具可以直接在名称属性?

上完成此操作

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 元素属性可以用开关设置吗？

Can a switch be used to set HTML element attributes in Angular?

angular

angular-ng-if

ng-switch