Попытка использовать объект Json для определения не работающего свойства объекта

Question

Я пытаюсь использовать значение 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"}]);
  }

Очевидно, что моя реализация не будет работать, так как она не может быть проанализирована, но есть ли способ заставить ее работать в аналогичном формате, или мне нужно будет полностью отделить процесс придания ей цвета?

Answer 1

Я исправил это с помощью:

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

Надеюсь, это поможет кому-то еще.