Question

我的ajax调用结果如下：

data : 
  0: {Address: "Delhi", EmailID: "bravo123@gmail.com", MobileNo: 
"9876543210", Name: "Bravo", Date: "04/06/2008", …}
1: {Mode: "0"}
2: {Mode: "1"}
3: {Mode: "2"}
4: {Mode: "3"}
5: {Mode: "4"}

我可以使用显示数据，

 <p *ngIf="details">{{ details[0]?.EmailID }}</p>

但是Im获取的模式是复选框的值。如何根据从ajax调用重现的值来选中一个复选框。

我的复选框代码html如下：

   <div class="custom-checkbox">
     <input type="checkbox" class="custom-control-input 
       [attr.id]="mode[i].id" [name]="mode[i].name"
       [checked]="(mode && (mode.indexOf(mode[i].id) !== -1))">
     <label class="custom-control-label" [attr.for]="mode[i].id"> 
       {{mode[i].name}}</label>
   </div>
   <div class="custom-control custom-checkbox custom-control-inline">
     <input type="checkbox" class="custom-control-input" 
       [attr.id]="mode[i+1].id" [name]="mode[i+1].name"
       [checked]="(mode && (mode.indexOf(mode[i+1].id) !== -1))">
     <label class="custom-control-label" [attr.for]="mode[i+1].id"> 
       {{mode[i+1].name}}</label>
   </div>

我的ts文件：

public mode = [
  { id: 0, name: 'Select All' },
  { id: 1, name: 'aaa' },
  { id: 2, name: 'bbb' },
  { id: 3, name: 'cccc' },
  { id: 4, name: 'dddd' },
];

有人可以帮我吗？

Answer 1

您将需要以下内容：

<input type="checkbox" value="item.id" [attr.checked]="fooData.mode === item.id ? true : null" />

注意为空在这里。

我已经创建了一个像您的代码一样小的Working Demo。

Updated Demo和数据数组。

如何基于角度6中的值数组动态进行复选框检查？

1 个答案: