如何从 QueryList 的元素中获取 innerText<t> ?</t>

Question

addGoatToGroupForVaccination(goatObject: {EarTag:string, GoatId:number}){

for (let i = 0; i < this.goatsGroupForVaccination.length; i++){
  if (this.goatsGroupForVaccination[i].EarTag === goatObject.EarTag){
    this.goatsGroupForVaccination.splice(i, 1);
    for (let i = 0; i < this.vaccinateGoatButtons.toArray().length; i++){
      if (this.vaccinateGoatButtons[i].nativeElement.innerText === goatObject.EarTag){
        this.vaccinateGoatButtons[i].remove;
      }
    }
  }
}

this.goatsGroupForVaccination.push(goatObject);

}

I get a "Cannot read property nativeElement of undefined. All I want is to get the innerText value of a button. How can this be done?

Answer 1

You can get undefined for two reasons (I cannot tell you why because there is not enough code in your question).

Maybe you are accessing those elements before the elements are fully initialized by using the wrong Angular lifecycle hook. For example, if we use @ContentChildren() :

  @ContentChildren(XComponent) xComponents: QueryList<XComponent>;

  ngOnInit() {
    // here this.xComponents === undefined.
  }


  ngAfterContentInit() {
    console.log(this.xComponents) // <-- take a look if you have the nativeElement prop before trying to access it 
    this.xComponents.forEach((xComponent: XComponent) => {
      // do something with each xComponent
    })
  }

If you have the nativeElement property in your console.log, then you can just use it and the problem is solved. But if you do not have the nativeElement property in your QueryList<T> , just like in this example:

Then you can inject the ElementRef in the constructor of the children components as public (just be warned that this might represent a security issue, potentially exposing your app to XXS attacks. I am telling this because your App might be internal or you could not care about a security vulnerability).

This is how to inject the elementRef as public in the constructor of the child component:

  constructor(public elementRef: ElementRef) {}

Then you will have the ElementRef with the nativeElement property nested inside:

Again, this might expose you to a web security issue (if you are interested in reading more about security, take a look at the Angular security guide )