Как сделать флажок динамически на основе массива значений в угловых 6? - PullRequest
Новая
       23

Как сделать флажок динамически на основе массива значений в угловых 6?

0 голосов
/ 09 октября 2018

Мой результат вызова 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>

Но режимы, которые я получаю, являются значениями флажков.Как сделать флажок установленным на основе значений, получаемых при вызове 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' },
];

Может кто-нибудь помочь мне с этим, пожалуйста?

1 Ответ

0 голосов
/ 09 октября 2018

Вам понадобится что-то вроде этого: 

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

уведомление null здесь.

Я создал небольшую Рабочая демоверсию , как вашакод.

Обновленная демоверсия с массивом данных.

...