尝试使用 Json 对象定义对象的属性不起作用答案

【问题标题】：Attempting to use a Json object to define an object's property not working尝试使用 Json 对象定义对象的属性不起作用
【发布时间】：2020-04-30 10:36:22
【问题描述】：

我正在尝试使用 Json 值来定义 SVG 圆圈的填充颜色。

        <div *ngFor="let res of moodColours">
          <svg height="50" width="50">
            <circle cx="25" cy="25" r="20" stroke="black" stroke-width="3" fill="{{res[0].hex}}" />
          </svg>
          <p>{{res[0].mood}}</p>
        </div>

page.ts中是这样定义的：

  setupMoodPalette() {
    this.moodColours.push([{mood: "Happy", hex: "#fcba03"}]);
    this.moodColours.push([{mood: "Love", hex: "#ff00e6"}]);
    this.moodColours.push([{mood: "Depressed", hex: "#6b03fc"}]);
    this.moodColours.push([{mood: "Anxious", hex: "#eaff00"}]);
    this.moodColours.push([{mood: "Confused", hex: "#807966"}]);
    this.moodColours.push([{mood: "Hurt", hex: "#4c8779"}]);
    this.moodColours.push([{mood: "Angry", hex: "#b51818"}]);
    this.moodColours.push([{mood: "Lonely", hex: "#5a6271"}]);
    this.moodColours.push([{mood: "Guilty", hex: "#F74B02"}]);
    this.moodColours.push([{mood: "Embarassed", hex: "#fc0303"}]);
  }

显然，我的实现将无法工作，因为它无法被解析，但有没有办法让它以类似的格式工作，或者我是否需要完全分开赋予它颜色的过程？

【问题讨论】：

标签： html json angular typescript svg

【解决方案1】：

我使用以下方法解决了这个问题：

[attr.fill]=res[0].hex

希望这对其他人有所帮助。

【讨论】：