大家好:我有一个组件。组件视图有一个表:
<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>
下面是使用 *ngFor 生成的表视图图像的链接。
业务逻辑是"单击删除按钮时,必须删除所有选中的收件人"。我想将一个参数传递给我的删除函数(我认为它应该是一个包含检查的收件人 ID 的数组)
这是我的组件代码:
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");
}
}
我想知道如何实现这一目标。
干杯
向收件人添加属性selected
。在复选框更改上,将其设置为 true。
用户单击"删除所有收件人"后,只需筛选列表中选择的收件人即可。
像这样:
<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>
和组件:
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;
}
}
如果可以向"收件人"模型再添加一个属性,则跟踪所选记录非常容易。
在收件人模型中添加了"选定"属性,并将复选框双向绑定到选定属性。
<input #{{rp.id}} type="checkbox" [(ngModel)]="rp.selected">
现在在组件中添加一个方法来获取所有选定的记录
private getSelected() {
return this.arrAll.filter((item) => item.selected);
}
然后获取所选记录
deleteRecipients() {
console.log(this.getSelected());
}
在控制器中添加一个函数,该函数将在选中复选框时触发(ng-单击复选框)。根据复选框的值,您将知道它是被选中还是未选中。为已检查的收件人列表维护另一个模型。如果选中,则将收件人追加到列表中,如果未选中,则删除。调用删除时,只删除该模型中的?