Cannot read properties of undefined (reading 'checked')-CodePudding

Im trying to fill my panel with information from my web api(that already works) but also to have the option to add a new point to my list via my panel.

My checkbox panel:

<div class="generalCharacteristicsHover" (mouseleave)="hoveredPersonId = null">
                            
                            <h4> Allgemeine Merkmale </h4>
                            <div class="list-container">
                                    <ng-container *ngFor="let char of allATypes">
                                        <mat-checkbox name="aType.allgemeinesMerkmal.bezeichnung" 
                                        [checked]="checkAll(char.bezeichnung)" //getting default values form api
                                        (change)="addToList($event)" //method to add a new point
                                        > {{char.bezeichnung}} </mat-checkbox>
                                    </ng-container>
                            </div>
                        </div>

My List:

<div id="generalCharacteristics">
                    <mat-label> Allgemeine Merkmale:</mat-label>
                    <ul> 
                        <li 
                        *ngFor="let typB of aType"> 
                        {{typB.allgemeinesMerkmal.bezeichnung}} </li>
                    </ul>
            </div>

And here are my methods, checkAll is working, addToList is my current problem.

 checkAll(data: any){ 
      for(let i = 0; i < this.aType.length; i  ){
        if(this.aType[i].allgemeinesMerkmal.bezeichnung == data){
          return true;
          
        }
          
  } return false;
  }
  addToList(event: any){
    if(event.target.checked){
      this.aType.push(event.target.value);
    }
  }

Idk if its necessary but here is also my subscription:

 //Allgemeine Merkmale
    this.route.params.subscribe(params => {
      const id = params['id'];
      this.amService
      .getTypeId(id)
      .subscribe(data => { this.aType = data; console.log(this.aType);
      this.amService.getTypeId(id).toPromise().then(result =>{
        this.checkboxesLoaded = true;
      })})})

The error if im trying to add a new point (with checking in my panel) is:

core.js:6479 ERROR TypeError: Cannot read properties of undefined (reading 'checked')
    at ProfilansichtComponent.addToList (profilansicht.component.ts:143)

CodePudding user response：

Fixed it myself with

console.log("pushed "   data   "to List");
console.log(this.aType);
this.aType.push(data);

Thought too complicated about it

CodePudding user response：

You use the Angular Material checkbox API, more specifically the change event. It outputs an object of type MatCheckboxChange which has a checked attribute that you want.

Your mistake is here:

  addToList(event: any){
    if(event.target.checked){ // <---
      this.aType.push(event.target.value);
    }

It should be

  addToList(event: any){
    if(event.checked){
      this.aType.push(event.checked);
    }