Angular 2 复杂的属性绑定答案

【问题标题】：Angular 2 complex property bindingAngular 2 复杂的属性绑定
【发布时间】：2017-02-14 14:06:25
【问题描述】：

我有一个这样的模型 json：

[{
   "PropName":"disabled",
   "Value":"false"
},
{
   "PropName":"color",
   "Value":"primary"
},
{
   "PropName":"visible",
   "Value":"false"
}]

现在我需要为一个按钮应用一些属性，在这种情况下，只需要数据模型颜色的第二个元素。

<button md-raised-button color="primary"></Button>

PropName 值应替换为 color 属性，而数据的值应替换为 primary 值。

主要是我想动态应用一个或多个属性，形成一个带有属性名称和值的元素 json 数组。谁能给我举个例子？

谢谢

【问题讨论】：

使用 [ngStyle] 我相信它会成功。

标签： json angular angular-directive

【解决方案1】：

在逻辑上，您将创建对象并将其称为示例元素。

然后在模板中：

<button *ngFor="let element of elements" [color]="'primary': element.PropName == 'disabled'" [value]="element.Value" md-raised-button color="primary"></Button>

【讨论】：

我不能使用ngClass，在这种情况下我需要设置一个属性而不是css类，属性是color="primary"，我使用的是角度材料2的按钮
检查我在答案中所做的更改
几乎......我有一个元素数组而不是单个元素模型，我需要一些东西来搜索正确的元素索引，其中 property.name ="color"
您的意思是需要为每个元素设置不同的颜色，还是只想在某种颜色时显示？
用所需的 For 循环更新了答案，以便它可以遍历元素。

【解决方案2】：

我解决了，但我不知道是否最佳实践：

<button md-raised-button  [color]="getColorButton()">
    {{dati.Label}}
</button>

从 ts 组件我从模型中搜索颜色属性并返回值获取颜色按钮（）：字符串 { if (this.colore!=null) return this.colore;

this.dati.Proprieta.forEach(element => {
  if (element.Nome=='color'){
    this.colore =  element.Valore;
  }

});
return this.colore;

}

【讨论】：