未根据 ngFor 循环中的状态检查复选框答案

【问题标题】：Checkbox not getting checked according to status in ngFor loop未根据 ngFor 循环中的状态检查复选框
【发布时间】：2021-09-08 08:31:53
【问题描述】：

我有以下方式的一些值：

{
    "filter_value": "Pending",
    "filter_level": "DASHBOARD",
    "checked": "false"
}, {
    "filter_value": "Partially Settled",
    "filter_level": "DASHBOARD",
    "checked": "true"
}

但即使选中标志中的值为 false，复选框也会自动选中。我尝试使用 [ngModelOptions] ， [checked] 但它们都不起作用。

<tr>
    <td *ngFor="let TradeType of filterAndSideLinkData.TRADE_TYPE | slice: 4:8; let i = index ">
       <label>
       <input name="tt_{{i}}" class="minimal" [(ngModel)]="TradeType.checked" (ngModelChange)="onSelectFilter(TradeType)" type="checkbox"/>
       <span class="label-text">{{ TradeType.filter_value }}</span>
       </label>
     </td>
 </tr>

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

在您的 JS 对象中，“checked”字段是一个字符串而不是布尔值，由于 javascript 隐式强制，它被转换为 true。

只有在您通过输入复选框更改其值后，它才会变为真正的布尔值。

【讨论】：

【解决方案2】：

这取决于你的对象必须是这样的：

{
    "filter_value": "Pending",
    "filter_level": "DASHBOARD",
    "checked": false # boolean not string
}, {
    "filter_value": "Partially Settled",
    "filter_level": "DASHBOARD",
    "checked": true # boolean not string
}

演示：

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<tr>
  <td *ngFor="let TradeType of TRADE_TYPE ; let i = index ">
    <label>
     <input name="tt_{{i}}" class="minimal" [(ngModel)]
     ="TradeType.checked" checked="TradeType.checked"
     (ngModelChange)="onSelectFilter(TradeType)" type="checkbox"/>
     <span class="label-text">{{ TradeType.filter_value }}</span>
     </label>
  </td>
</tr>

和ts：

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  TRADE_TYPE = [
    {
      filter_value: 'Pending',
      filter_level: 'DASHBOARD',
      checked: false
    },
    {
      filter_value: 'Partially Settled',
      filter_level: 'DASHBOARD',
      checked: true
    }
  ];
  onSelectFilter(TradeType: any) {
    return true;
  }
}

【讨论】：