如何在幻燈片中放置數字值

Question

我想從列表項目“選中”中獲取所有“ id”

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

Answer 1

您可以創建一個單獨的數組來跟蹤“列表”中哪個項目已被標記為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));
    }
  }

柱塞演示