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

Posted 2023-03-13

【中文标题】尝试使用 Json 对象定义对象的属性不起作用

【英文标题】：Attempting to use a Json object to define an object's property not working

【发布时间】：2020-04-30 10:36:22

【问题描述】：

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

        <div *ngFor="let res of moodColours">
          <svg  >
            <circle cx="25" cy="25" r="20" stroke="black" stroke- 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"]);
  

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

【参考方案1】：

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

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

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