Не удается прочитать свойства неопределенного (чтение «проверено»)

#angular

Вопрос:

Я пытаюсь заполнить свою панель информацией из моего веб-api(которая уже работает), но также хочу иметь возможность добавить новую точку в свой список через мою панель.

Моя панель флажков:

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

Мой Список:

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

И вот мои методы, проверка работает, addToList-моя текущая проблема.

  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, если это необходимо, но вот также моя подписка:

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

Ошибка, если я пытаюсь добавить новую точку (с проверкой на моей панели), заключается в следующем:

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

Ответ №1:

Починил его сам с помощью

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

Думал об этом слишком сложно

Ответ №2:

Вы используете API флажка углового материала, более конкретно change событие. Он выводит объект типа MatCheckboxChange , у которого есть checked нужный вам атрибут.

Ваша ошибка здесь:

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

Это должно быть

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