Question

我想在我的对象中显示带有背景颜色的按钮，名为＆＃34; .color＆＃34;。

{{act.color}}

显示为＆＃34;＃ff00ff＆＃34;工作正常，

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 - 由以下原因导致：无法执行＆＃39; setAttribute＆＃39; on＆＃39;元素＆＃39;：＆＃39; + {{act.color}}＆＃39;不是有效的属性名称。

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

非常感谢：）

Answer 1

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

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

尝试：

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

Answer 2

您可以动态设置背景颜色，如下所示

calc()

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

2 个答案: