满足条件时，角度检查属性无法正常工作答案

【问题标题】：Angular checked attribute not working properly when condition is met满足条件时，角度检查属性无法正常工作
【发布时间】：2020-11-13 06:38:19
【问题描述】：

我在模板中有以下代码，它检查条件是否为真并检查复选框。

当重新渲染 div 时，如果条件为真，则应检查复选框。即使条件为真并且 html 输出正确 (checked=true) 复选框也不会被选中。

希望问题很清楚。

<tr *ngFor="let s of search_data" 
              [class]="{
                'bg-success-light' :  added_microchips.has(s.microchip)
              }"
              >
                <td>
                  <input 
                  ngModel
                  #microchip_checkbox="ngModel"
                  name="check_micro"
                  (change)="addRemoveMicroChip(s.microchip,microchip_checkbox);"
                  class="form-check-input" 
                  type="checkbox"
                  [attr.checked]="added_microchips.has(s.microchip)" //not working
                  >
                </td>
              </tr>

html 输出（控制台）：

<input _ngcontent-wnq-c46="" ngmodel="" name="check_micro" type="checkbox" 
   class="form-check-input ng-valid ng-touched ng-dirty" 
   ng-reflect-model="" ng-reflect-name="check_micro" checked="true">

【问题讨论】：

您应该将其绑定到[checked] 属性，而不是HTML checked 属性。
我在 TS 中有以下变量：test=1 在模板中[checked]="test == 1" 应该检查吗？不是。
我实际上有一个用于搜索数据（调用服务）并呈现 div 的按钮。当我再次单击该按钮时，将重新呈现 div

标签： angular angular-directive angular-template

【解决方案1】：

<tr *ngFor="let s of search_data" 
              [class]="{
                'bg-success-light' :  added_microchips.has(s.microchip)
              }"
              >
                <td>
                  <input 
                  ngModel
                  #microchip_checkbox="ngModel"
                  name="check_micro"
                  (change)="addRemoveMicroChip(s.microchip,microchip_checkbox);"
                  class="form-check-input" 
                  type="checkbox"
                  [checked]="added_microchips.has(s.microchip)" //not working
                  >
                </td>
              </tr>

【讨论】：