无法读取未定义的属性（读取“已检查”）答案

【问题标题】：Cannot read properties of undefined (reading 'checked')无法读取未定义的属性（读取“已检查”）
【发布时间】：2021-09-20 21:04:50
【问题描述】：

我试图用来自我的 web 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>

这是我的方法，checkAll 有效，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)

【问题讨论】：

标签： angular

【解决方案1】：

自己修复了

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

想得太复杂了

【讨论】：

【解决方案2】：

您使用 Angular Material 复选框 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);
    }

【讨论】：