Question

我有一个在函数中使用的对象valuesColors

export class CountryEnvelopeComponent implements OnInit {
  constructor() {}
  valuesColors: [
      {
        key: "<75%";
        color: "#00965E";
      },
      {
        key: ">=75%&<90%";
        color: "#ff9933";
      },
      {
        key: ">90%";
        color: "#E61D00";
      }
    ];
  ngOnInit() {
  }
  getColor(value) {
    console.log(this.valuesColors);
    let element = this.valuesColors.find(elm => {
      return elm.key == value;
    });
    return element.color;
  }
}

在HTML中，我在循环中使用getColor函数更改样式

<div [style.background-color]="getColor(title.value)" class="badge circle-indicator"></div>

我收到此错误：

ERROR TypeError：无法读取未定义的属性'find'

Answer 1

您必须使用=而不是:：

valuesColors = [
      {
        key: "<75%",
        color: "#00965E"
      },
      {
        key: ">=75%&<90%",
        color: "#ff9933"
      },
      {
        key: ">90%",
        color: "#E61D00"
      }
    ];

:定义对象类型，而=为其赋值。（请注意数组中的,而非;）

Answer 2

所以:（docs）用于设置变量的类型，因此它必须是valuesColors:Array = your array 并且您的对象必须以,而不是';'终止您的数组必须看起来像这样：

valuesColors = [
{
  key: "<75%",
  color: "#00965E",
},
{
key: ">=75%&<90%",
color: "#ff9933",
},
 {
key: ">90%",
color: "#E61D00",
 }
];

演示：https://stackblitz.com/edit/angular-fyo9q2 希望这会有所帮助

Answer 3

在这种情况下，我认为this引用了getColor方法。如果您改为将其写为getColor = (value) => {...}，它还会发生吗？

Answer 4

如果您是从另一个上下文调用的，则需要将您的方法绑定到您的类。您可以在构造函数中执行此操作：

constructor() {
    this.getColor = this.getColor.bind(this);
}

这样，当其他人调用您的方法时，您在this中对getColor的使用将被保留，并将有权访问您的类属性。

无法读取Angular中未定义的属性“查找”

4 个答案: