Angular 2条件属性不起作用答案

【问题标题】：Angular 2 Conditional attribute not workingAngular 2条件属性不起作用
【发布时间】：2017-07-29 21:37:02
【问题描述】：

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

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

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

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

在“元素”上执行“setAttribute”失败：“{{stackedDisplay()}}”不是有效的属性名称。

我查看了其他一些关于此的问题，他们说要使用 attr 绑定：

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

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

【问题讨论】：

最后一个是好的。抛出的错误是什么？
Angular 目前不支持动态指令：有关更多信息，请参阅 the comments on this question
看起来ion-label 指令只读取其构造函数中的属性。所以 emil 的解决方案可能是你唯一的选择。 github.com/ionic-team/ionic/blob/master/src/components/label/…
谢谢！ @0mpurdy 这也适用于模板，例如动态地将子指令添加到离子列表控件，因为这解释了我遇到的另一个问题

标签： javascript angular typescript ionic2

【解决方案1】：

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

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

【讨论】：

谢谢，这暂时可以解决，但我希望我们找到一种有条件的方法，但支持努力！
我认为不可能以角度动态添加属性。使用 React 非常简单：D
嗯，我现在会标记你的答案是正确的，但是如果有人告诉我有条件的方法，那么我可能会切换到他们的方法

【解决方案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

【讨论】：