Jak dynamicznie powiązać wartość pola wyboru Angular 2

Question

Cześć wszystkim: Mam komponent. Widok składnik ma tabelę:

<div class="container"> 
<h2>Recipients List</h2> 
<br> 
<table class="table table-striped"> 
    <thead> 
     <tr> 
      <th>Id</th> 
      <th>Name</th> 
      <th>Phone</th> 
      <th>Status</th> 
      <th>Select</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="#rp of arrAll"> 
      <td>{{rp.id}}</td>    
      <td>{{rp.name}}</td> 
      <td>{{rp.phone}}</td>     
      <td>{{rp.isActivated?'Active':'Inactive'}}</td>    
      <td> 
       <input #{{rp.id}} type="checkbox" (change)="checkbox(value)"> 
      </td> 
     </tr>   
    </tbody> 
</table> 

<button class="btn btn-success" (click)="newRecipient()">New Recipient</button> 
<button class="btn btn-danger pull-right" (click) ="deleteRecipients()">Delete Recipients</button> 

Tu jest link do wizerunku table view który został wygenerowany przy użyciu * ngFor.

Logika biznesowa brzmi: "Po kliknięciu przycisku Usuń wszyscy sprawdzeni odbiorcy muszą zostać usunięci". Chcę przekazać parametr do mojego kasowania funkcji (co moim zdaniem powinno być tablicą zawierającą sprawdzonych identyfikatory odbiorcy)

Oto mój kod komponent:

import {Component} from 'angular2/core'; 
import {CORE_DIRECTIVES} from 'angular2/common'; 
import { Router, RouteParams } from 'angular2/router'; 
import {RecipientsService} from'../../services/recipients/recipients.service'; 
import {Recipient} from '../../models/recipient/recipient'; 

@Component({ 
selector: 'recipient-list-view', 
templateUrl: './app/components/recipient-list-view/recipient-list-view.html', 
styleUrls: ["./app/components/recipient-list-view/style.css"] 
}) 

export class RecipientListViewComponent { 

arrAll: Recipient[]; 

constructor(private recipientsService: RecipientsService, params: RouteParams, private router: Router) { 
    this.arrAll = recipientsService.getAll();   
} 

newRecipient() { 
    this.router.navigate(['../NewRecipient']); 
} 

deleteRecipients() { //need to know which recipients are checked 

    console.log("delete"); 
} 


} 

Chciałbym wiedzieć, jak to osiągnąć to.

Cheers

Answer 1

Dodaj funkcję w kontrolerze, który byłby uruchamiany podczas sprawdzania pole wyboru (ng-kliknięciem pole wyboru). W zależności od wartości pola wyboru będziesz wiedzieć, czy jest zaznaczone/odznaczone. Utrzymaj inny model listy sprawdzonych odbiorców. Dołącz odbiorcę do listy, jeśli jest zaznaczona, usuń, jeśli nie jest zaznaczona. Podczas wywoływania delete po prostu usuwaj te w tym modelu?

Answer 2

Dodaj właściwość selected do odbiorcy. Po zmianie pola wyboru, ustaw to jako prawdziwe.

Po kliknięciu przycisku usuń wszystkich odbiorców, po prostu przefiltruj listę dla wybranych.

coś takiego:

<div class="container"> 
    <h2>Recipients List</h2> 
    <br> 
    <table class="table table-striped"> 
     <thead> 
      <tr> 
       <th>Id</th> 
       <th>Name</th> 
       <th>Phone</th> 
       <th>Status</th> 
       <th>Select</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr *ngFor="#rp of arrAll"> 
       <td>{{rp.id}}</td>    
       <td>{{rp.name}}</td> 
       <td>{{rp.phone}}</td>     
       <td>{{rp.isActivated?'Active':'Inactive'}}</td>    
       <td> 
        <input #{{rp.id}} [(ngModel)]="rp.selected" type="checkbox" (change)="checkbox(rp)"> 
       </td> 
      </tr>   
     </tbody> 
    </table> 

    <button class="btn btn-success" (click)="newRecipient()">New Recipient</button> 
    <button class="btn btn-danger pull-right" (click) ="deleteRecipients()">Delete Recipients</button> 
</div> 

i składnik:

export class RecipientListViewComponent { 

    arrAll: Recipient[]; 

    constructor(private recipientsService: RecipientsService, params: RouteParams, private router: Router) { 
     this.arrAll = recipientsService.getAll();   
    } 

    newRecipient() { 
     this.router.navigate(['../NewRecipient']); 
    } 

    deleteRecipients() { //need to know which recipients are checked 
     let selected = this.arrAll.filter((x) => x.selected) 
     console.log(selected); 
    } 

    checkbox(recipient) { 
     recipient.selected = (recipient.selected) ? false : true; 
    } 
} 

Answer 3

Jeśli można dodać jeszcze jedną właściwość modelu „Odbiorca”, wówczas jest bardzo łatwo śledzić wybrane rekordy .

Dodano "wybraną" właściwość w modelu Odbiorca i dwukierunkowo wiążę pole wyboru z wybraną właściwością.

<input #{{rp.id}} type="checkbox" [(ngModel)]="rp.selected"> 

Teraz dodać metodę w komponencie, aby wszystkie wybrane rekordy

private getSelected() { 
    return this.arrAll.filter((item) => item.selected); 
} 

następnie uzyskać wybrane rekordy

deleteRecipients() { 
    console.log(this.getSelected()); 
}