Angular 4 -ngx-тумблер не работает с ngfor

Question

У меня много устройств. Я хочу показать состояние каждого устройства с помощью ui-switch. Предположим, что все devicedata похожи на

 alldevicedata=[{"id": 23,  "alertonoff": "1"},
 {"id": 34,  "alertonoff": "0"},
 {"id": 35,  "alertonoff": "1"},
 {"id": 36,  "alertonoff": "0"} ] 

Html похож на

    <div *ngFor="let item of alldevicedata" class="form-group">
          Alert
          <span class="floatright">             
               <ui-switch  id="alertonoff" name="alertonoff" size="small"
               [(ngModel)]="toggleValue"  (ngModelChange)="item.alertonoff=toggleValue ?'1':'0'" 
                color="#1abc9c"></ui-switch>
           </span>
         </div>

, если я переключаюПереключатель, а затем значение оповещения о перкулярном элементе изменяется должным образом. Это означает, что если я включу переключатель 2-го числа, то изменится только значение 2-го элемента.

Но одновременно все параметры переключателя меняются.означает, что если включить 2-й номер, то все остальные также включаются следующим образом.

Я хочу показать состояние каждого предупреждения, если alldevicedata.alertonoff = 1, тогда пользовательский интерфейс включен, иначе выключен.Stackblitz: https://stackblitz.com/edit/angular-zg21jt?embed=1&file=src/app/app.module.ts Заранее спасибо.

Answer 1

ваш код правильный, просто вы пропустили имя свойства объекта.Поскольку вы зацикливаете все элементы, а переключатель каждого элемента связан с одним и тем же значением, замените этот код своим.

обратите внимание на эту строку: [(ngModel)] = "toggleValue" для ---> [(ngModel)] = "item.alertonoff"

<div *ngFor="let item of alldevicedata" class="form-group">
    Alert
    <span class="floatright">

              <ui-switch  id="alertonoff" name="alertonoff" size="small" [(ngModel)]="item.alertonoff"  (ngModelChange)="item.alertonoff=toggleValue ?'1':'0'" color="#1abc9c"></ui-switch>

Answer 2

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<div *ngFor="let item of alldevicedata" class="form-group">
    Alert{{item.alertonoff}}
    <span class="floatright">

              <ui-switch  id="alertonoff" name="alertonoff" size="small"[(ngModel)]="item.alertonoff" color="#1abc9c"></ui-switch>
            </span>
 </div>

Answer 3

Это происходит потому, что все переключатели привязаны к одному значению.Попробуйте изменить ngModel следующим образом:

<ui-switch  id="alertonoff" name="alertonoff" size="small" [(ngModel)]="item.checked"  (ngModelChange)="onModelChanged(item)" color="#1abc9c"></ui-switch>

и в классе компонентов:

allDeviceData = [
    { 'id': 23,  'alertonoff': '1', 'checked': true },
    { 'id': 34,  'alertonoff': '0', 'checked': false },
    { 'id': 35,  'alertonoff': '1', 'checked': true },
    { 'id': 36,  'alertonoff': '0', 'checked': false }
];

onModelChanged(item) {
    item.alertonoff = item.checked ? '1' : '0';
    console.log(item.id, item.alertonoff);
}