Salut à tous: J'ai un composant. La vue des composants a une table:
<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>
Voici un lien vers une image de la vue de la table qui a été générée à l’aide de * ngFor.
La logique applicative est "Lorsque vous cliquez sur le bouton de suppression, tous les destinataires cochés doivent être supprimés". Je veux passer un paramètre à ma fonction delete (qui devrait être un tableau contenant les identifiants de destinataires vérifiés)
Voici le code de mon composant:
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");
}
}
J'aimerais savoir comment y parvenir.
À votre santé
Ajoutez une propriété selected
à votre destinataire. Sur la case à cocher changer, mettez comme vrai.
Une fois que l'utilisateur a cliqué sur Supprimer tous les destinataires, il suffit de filtrer la liste pour ceux qui sont sélectionnés.
Quelque chose comme ça:
<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>
Et le composant:
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;
}
}
Si vous pouvez ajouter une propriété supplémentaire à votre modèle "Destinataire", il est alors très facile de suivre les enregistrements sélectionnés.
Ajout d'une propriété "sélectionnée" dans votre modèle de destinataire et liaison bidirectionnelle de la case à cocher à la propriété sélectionnée.
<input #{{rp.id}} type="checkbox" [(ngModel)]="rp.selected">
Maintenant, ajoutez une méthode dans le composant pour obtenir tous les enregistrements sélectionnés
private getSelected() {
return this.arrAll.filter((item) => item.selected);
}
Puis obtenir les enregistrements sélectionnés
deleteRecipients() {
console.log(this.getSelected());
}
Ajoutez une fonction dans votre contrôleur qui serait déclenchée en cochant la case à cocher (ng-clic de case à cocher). En fonction de la valeur de la case à cocher, vous saurez si elle est cochée ou non. Conservez un autre modèle pour la liste des destinataires cochés. Ajoutez le destinataire à la liste si elle est cochée, supprimez-la si elle n'est pas cochée. Lorsque vous appelez delete, supprimez simplement ceux de ce modèle?