Question

我正在研究anglar4应用程序。如果json数据状态为1，则显示复选框，反之亦然。

Component.ts： -

this.names = [
    {
       "name":"Jonny"
       "status":1
    },
    {
       "name":"Rahul"
       "status":0
    },
    {
       "name":"Jimmy"
       "status":0
    },
    {
       "name":"Harry"
       "status":1
    },
    {
       "name":"Vina"
       "status":0
    }
  ]

Component.html： -

<ul>
  <li> <input type="checkbox"/> All
  </li>
  <li *ngFor="let n of names"> 
   <span *ngIf="n.status">
    <input type="checkbox">
   </span>
  {{n.name}}
  </li>
</ul>

如果状态为1，如何选中所有复选框。

Answer 1

只需使用运营商ngIf="n.status === '1'"

即可

<span *ngIf="n.status === '1'">
    <input type="checkbox">
</span>

Answer 2

如果您想在“全部”

的一次检查中选中全部

组件：

checkAll(checked : boolean) {
    for(let name in names) {
        name.status = checked ? 1 : 0;
    }
}

模板：

<ul>
  <li> <input type="checkbox" (change)='checkAll($event.target.checked)'/> All
  </li>
  <li *ngFor="let n of names"> 
   <span *ngIf="n.status">
    <input type="checkbox" name="{{n.name}}" [(ngModel)]="n.status">
   </span>
  {{n.name}}
  </li>
</ul>

这将显示状态为1的所有复选框：

<input type="checkbox" name="{{n.name}}" [(ngModel)]="n.status">

Answer 3

当条件 n.status === 1

时，这将显示所有复选框

<ul>
    <li *ngFor="let n of names"> 
        <span *ngIf="n.status == 1">
            <input type="checkbox" [checked]="n.status == 1">
        </span>{{n.name}}
    </li>
</ul>

如果angular2中的数据状态为1，如何选中所有复选框？

3 个答案: