形状属性的三元运算符不起作用

Question

我正在尝试向shape 添加三元条件，这是一个图标类型shape="success-standard" - 在shape="name.active ? 'success-standard' : 'times-circle'" 中，我正在尝试为图标类型添加条件。并且使用 [shape] 指令不起作用

<clr-dg-row class="man-rcs" *ngFor="let name of visibleNames">
  <clr-dg-cell (click)="handleRowClick(name)" class="tac">
    <clr-icon size="18" shape="name.active ? 'success-standard' : 'times-circle'">
    </clr-icon>
  </clr-dg-cell>
</clr-dg-row>

通常我会这样做，但在这种情况下，这不是我想要的

<clr-dg-cell class="tac">
  <clr-icon size="18" *ngIf="name?.active" shape="success-standard" class="is-solid is-success"></clr-icon>
  <clr-icon size="18" *ngIf="!name?.active" shape="times-circle" class="is-solid is-danger"></clr-icon>
</clr-dg-cell>

Answer 1

你需要像这样绑定到 shape 属性。图标是我们的 Web 组件，因此您必须使用这种不同的方法。

[attr.shape]=“name.active ? ‘success-standard’ : ‘times-circle’”

详情请见How can I dynamically change the shape of a clr-icon custom element?。

Answer 2

试试下面的代码

<clr-icon size="18" shape="{{name.active == true ? 'success-standard' : 'times-circle'}}">

或者

<clr-icon size="18" shape="(name?.active == true ? 'success-standard' : 'times-circle')">

希望第一个代码能正常工作