angular - 未根据 ngFor 循环中的状态检查复选框

Question

我有以下方式的一些价值观：

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

但即使选中标志中的值为假，复选框也会自动选中。我尝试使用[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>

标签： angularangular2-template

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