javascript - Cannot read property 'find' of undefined in Angular - Stack Overflow

admin管理员组

文章数量:1429772

I have this object valuesColors that I use in a function

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;
  }
}

In HTML, inside a loop I change style using getColor function

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

I get this error:

ERROR TypeError: Cannot read property 'find' of undefined

I have this object valuesColors that I use in a function

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;
  }
}

In HTML, inside a loop I change style using getColor function

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

I get this error:

ERROR TypeError: Cannot read property 'find' of undefined

• javascript
• angular

Share Improve this question Follow asked Aug 9, 2018 at 15:23 infodevinfodev 5,2652222 gold badges8181 silver badges152152 bronze badges 3

• 2 Shouldn't it be valuesColors = you array ? – Madhan Varadhodiyil Commented Aug 9, 2018 at 15:28
• you probably meant to set the variable inside constructor? – Bhojendra Rauniyar Commented Aug 9, 2018 at 15:33
• Also , your array has syntax errors – Madhan Varadhodiyil Commented Aug 9, 2018 at 15:34

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

You have to use = instead of : :

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

: defines an object type whereas = gives it some value. (be aware of the , instead of the ; in your array)

so : (docs) is used to set the type of the variable , So it must have been valuesColors:Array = your array And your objects must be terminated by , not ';' Your array must look something like this :

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

demo : https://stackblitz./edit/angular-fyo9q2 Hope this helps

I think that this is referencing the getColor method in this case. Does it still happen if you instead write it as getColor = (value) => {...}?

You will need to bind your method to your class if you are calling it from another context. You could do this in your constructor:

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

That way, when something else calls your method, your use of this within getColor is preserved and will have access to your class property.

本文标签： javascriptCannot read property 39find39 of undefined in AngularStack Overflow