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

Posted 2023-03-13

【中文标题】从 Angular 2+ 中的预定义数据填充 formControlName 复选框

【英文标题】：Populate formControlName checkbox from pre-defined data in Angular 2+

【发布时间】：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',     


);

【参考方案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>