在 ionic 和 html 中如何通过复合名称访问属性答案

【问题标题】：in ionic and html how to access attribute by composited name在 ionic 和 html 中如何通过复合名称访问属性
【发布时间】：2017-05-24 08:56:23
【问题描述】：

我想在名为“.color”的对象中显示带有背景颜色的按钮。

{{act.color}}

显示为“#ff00ff”并且工作正常，并且

style="background-color:#ff00ff"

也可以。但是突出显示的代码会导致错误。

<ion-list>
  <ion-item ion-item *ngFor="let act of questions.qs; let i = index">
    {{act.quote}}
    {{act.color}}
    <div [ngSwitch]="act.type">
      <div *ngSwitchCase="'1to10'">
        <button large ion-button style="background-color:#ff00ff">1</button>
        **<button large ion-button style="background-color:"+{{act.color}}>2</button>**
        <button large ion-button>2</button>
        <button large ion-button>3</button>
...

错误是

./CreateSinglePermPage 类 CreateSinglePermPage 中的错误 - 原因：无法在“元素”上执行“setAttribute”：“+{{act.color}}”不是有效的属性名称。

如何从 html 中的对象访问我的颜色值？

非常感谢:)

【问题讨论】：

标签： html ionic2

【解决方案1】：

您可以像下面这样动态设置背景颜色

 <button large ion-button [style.background-color]="act.color">2</button>

【讨论】：

【解决方案2】：

从组件绑定变量时使用[]。

background-color 也有一个连字符，所以你需要单引号。

试试：

<button large ion-button [style]="'background-color':act.color">2</button>

【讨论】：