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));
    }
  }

Plunker demo

如何在幻灯片到角度材质中添加数字值

1 个答案: