从 Angular 2+ 中的预定义数据填充 formControlName 复选框答案

【问题标题】：Populate formControlName checkbox from pre-defined data in Angular 2+从 Angular 2+ 中的预定义数据填充 formControlName 复选框
【发布时间】：2021-04-13 10:03:46
【问题描述】：

我有一个动态创建的复选框列表，但我无法根据预定义的列表检查某些正确性。

HTML：

   <div class="row">
            <div class="example-container col-md-6">
              <div *ngFor="let atribuicao of atribuicoesOcorrencia" formArraylName="inputAtribuicaoOcorrencia">
                <mat-checkbox [value]="atribuicao.id" (change)="onChange(atribuicao, $event)">
                  <div style="white-space: pre-wrap;">
                    {{ atribuicao.descricao }}
                  </div>
                </mat-checkbox>
              </div>
            </div>            
          </div>

类 TS：我尝试在列表中填充 formControl 名称 inputAtribuicaoOcorrencia，在这种情况下唯一的一项检查是 id 3，但没有任何反应

this.atribuicoesOcorrencia.forEach(listAtibuicoes=> {
  ocorrencia.atribuicoesDTO.forEach(x => {
    if(listAtibuicoes.id == x.id){  
      
      this.formCadastro.get('inputAtribuicaoOcorrencia').setValue('checked');
   
   
    }
  });
});

TS2 类：或者下面的代码只检查一个 ID

  this.formCadastro.patchValue({

 inputAtribuicaoOcorrencia: 'checked',     


});

【问题讨论】：

标签： angular-reactive-forms angular2-forms

【解决方案1】：

您需要为 mat-checkbox 使用 [checked] 属性

// example
<mat-checkbox 
    [value]="atribuicao.id" 
    [checked]="atribuicao.id" // This is what you need to add. If id is there, it will get checked
    (change)="onChange(atribuicao, $event)"
>
    <div style="white-space: pre-wrap;">
        {{ atribuicao.descricao }}
    </div>
</mat-checkbox>

【讨论】：