Question

我正在尝试以角度2创建条件属性我也在使用Ionic 2。我有一个输入，我想控制（我认为是一个属性）

当我没有尝试有条件地绑定它时，我的代码工作正常：

<ion-label stacked color="primary">{{label}}</ion-label>

现在我改变了我的组件以接受一个新的输入isStacked并且我有一个函数来返回字符串，如果它是堆栈：

@Input() isStacked: boolean = true;
stackedDisplay(): string {
    return this.isStacked? "stacked" : '';
}

我将Ion标签更新为：

<ion-label {{stackedDisplay()}} color="primary">{{label}}</ion-label>

当我这样做时，我收到一个错误：

无法在'Element'上执行'setAttribute'：'{{stackedDisplay（）}}'不是有效的属性名称。

我看了几个关于此的问题，他们说要使用attr绑定：

<ion-label [attr.stacked]='isStacked' color="primary">{{label}}</ion-label>

当我这样做时，绑定也会失败，有人可以告诉我如何有条件地绑定这个属性吗？

Answer 1

你可以通过以下方式实现它，尽管它不是很漂亮。

<ion-label stacked *ngIf="isStacked" color="primary">{{label}}</ion-label>
<ion-label *ngIf="!isStacked" color="primary">{{label}}</ion-label>

Answer 2

与答案@emil相似，你可以做到

<ion-label stacked *ngIf="isStacked else notStacked" color="primary">{{label}}</ion-label>
<ng-template #notStacked>
  <ion-label color="primary">{{label}}</ion-label>
</ng-template>

（来自this answer文档here的灵感）

虽然将它用作布尔值没有意义，但也有ngSwitch

<div [ngSwitch]="stacked">
  <ion-label *ngSwitchCase="true" stacked color="primary">
  <ion-label *ngSwitchDefault color="primary">{{label}}</ion-label>
</div>

如果您不想在输出中引入额外级别的嵌套，可以将<div>替换为<ng-container>

Live plunker example

Angular 2条件属性不起作用

2 个答案: