如何将数字值放入幻灯片切换 Angular Material

Question

我想从列表项 "checked"

中获取所有 "id"

<div *ngFor="let item of list">
   <md-slide-toggle [(ngModel)]="item.id">
       item.name
    </md-slide-toggle>
</div>

Answer 1

您可以创建一个单独的数组来跟踪 'list' 中的哪个项目被标记为 true。然后，您可以使用 change 输出 event 将有关 item 的信息发送到您的组件并对其执行操作。

示例代码：

html:

<div *ngFor="let item of list; let i = index">
   <md-slide-toggle [checked]="flagArray[i]"
                    (change)="sendToServer($event, i, item)">
       {{item.name}}
    </md-slide-toggle>
</div>

component.ts:

flagArray = [];

  list = [
    { id: '1', name: 'item 1'},
    { id: '2', name: 'item 2'},
    { id: '3', name: 'item 3'},
    { id: '4', name: 'item 4'},
  ]

  constructor(){
    for(let  i=0; i<this.list.length; i++){
      this.flagArray.push(false);
    }
  }

  sendToServer(event, index, item){ 
    this.flagArray[index] = event.checked;

    if(event.checked == true){
      // add code to send item to server
      alert("item to send to server: " + JSON.stringify(item));        
    }
    else{
      // add code to remove item from server
      alert("item to remove from server: " + JSON.stringify(item));
    }
  }

Plunker demo

如何将数字值放入幻灯片切换 Angular Material

How can I put a number value in slide toogle Angular Material

slidetoggle

angular-material2

angular