复选框未根据 ngFor 循环中的状态进行检查

Question

我有以下方式的一些值：

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

但是即使选中标志中的值为 false，复选框也会自动选中。我尝试使用 [ngModelOptions] ， [checked] 但其中 none 正在工作。

<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>

Answer 1

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

{
    "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;
  }
}

Answer 2

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

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

复选框未根据 ngFor 循环中的状态进行检查

Checkbox not getting checked according to status in ngFor loop

angular2-template

angular