Angular中如何默认勾选指定PCP值的复选框

问题出在你给复选框加了*ngIf="item.FORMA_PAGO == 'PCP'"，这会直接把非PCP项的复选框整个移除，导致其他行看不到复选框。要实现所有复选框正常显示、仅PCP项默认勾选的效果，只需做以下3处修改：

• 删掉复选框上的*ngIf="item.FORMA_PAGO == 'PCP'"，确保所有符合userType!==137条件的行都能显示复选框
• 把固定的checked="true"改成属性绑定[checked]="item.FORMA_PAGO === 'PCP'"，让复选框根据当前item的FORMA_PAGO值自动设置默认勾选状态
• 修正ID绑定错误：将[id]="'credito'+ creditosList.DOCUMENTO_FAVOR"改为[id]="'credito'+ item.DOCUMENTO_FAVOR"，避免所有行ID重复或取到错误值

修改后的完整代码：

<ng-template #showGrid>
  <tbody class="TableNota">
    <tr *ngFor="let item of creditosList; let row_no = index">
      <td *ngIf="userType!==137" class="text-center">
        <input type="checkbox"
               class="chk"
               [id]="'credito'+ item.DOCUMENTO_FAVOR"
               [value]="item.DOCUMENTO_FAVOR"
               (change)="guardarList(item,$event.target.checked)"
               [checked]="item.FORMA_PAGO === 'PCP'"
               />  
      </td>
      <td class="text-center">{{ item.DOCUMENTO }}</td>
      <td class="text-center">{{ item.CONTRATANTE }}</td>
      <td class="text-center">{{ item.MONEDA }}</td>
      <td class="text-center">{{ item.MONTO | number:'1.2-2' }}</td>
      <td class="text-center">{{ item.FORMA_PAGO }}</td>
    </tr>
  </tbody>
</ng-template>

修改后，所有符合用户类型条件的行都会显示复选框，其中FORMA_PAGO为PCP的项会默认被勾选，其他项保持未勾选状态。

内容的提问来源于stack exchange，提问作者Anthony Villegas