javascript - Angular 2条件属性不起作用

Question

我正在尝试在 angular 2 中创建条件属性我也在使用 Ionic 2。我有一个输入，我想在其中控制(我认为是一个属性)

当我不尝试有条件地绑定(bind)它时，我的代码工作正常:

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

现在我更改了我的组件以接受一个新的 Input isStacked 并且我有一个函数来返回字符串(如果它是堆栈):

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

然后我将 Ion 标签更新为如下所示:

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

当我这样做时，我得到一个错误:

Failed to execute 'setAttribute' on 'Element': '{{stackedDisplay()}}' is not a valid attribute name.

我看了其他几个问题，他们说要使用 attr 绑定(bind):

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

当我这样做时，绑定(bind)也失败了，有人能告诉我如何有条件地绑定(bind)这个属性吗？

Answer 1

虽然不是很漂亮，但您可以通过以下方式实现它。

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