我正在使用Angle 7和Primeng
当我尝试将Primeng CRUD应用程序与复选框一起使用时，在选中/取消选中primeng复选框时遇到各种错误
当我最初选中复选框时，一切正常。.但是当我一次调用保存或删除记录时，出现了
之类的错误。TypeError: this.selection.filter is not a function
at Table.push../node_modules/primeng/components/table/table.js.Table.toggleRowWithCheckbox (table.js:851)
at TableCheckbox.push../node_modules/primeng/components/table/table.js.TableCheckbox.onClick (table.js:3120)
at Object.eval [as handleEvent] (TableCheckbox.html:2)
at handleEvent (core.js:23008)
at callWithDebugContext (core.js:24078)
at Object.debugHandleEvent [as handleEvent] (core.js:23805)
at dispatchEvent (core.js:20457)
at core.js:20904
at HTMLDivElement.<anonymous> (platform-browser.js:993)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
TypeError: this.selection.concat is not a function
at Table.push../node_modules/primeng/components/table/table.js.Table.toggleRowWithCheckbox (table.js:859)
at TableCheckbox.push../node_modules/primeng/components/table/table.js.TableCheckbox.onClick (table.js:3120)
at Object.eval [as handleEvent] (TableCheckbox.html:2)
at handleEvent (core.js:23008)
at callWithDebugContext (core.js:24078)
at Object.debugHandleEvent [as handleEvent] (core.js:23805)
at dispatchEvent (core.js:20457)
at core.js:20904
at HTMLDivElement.<anonymous> (platform-browser.js:993)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
这是我的代码，我正在使用组件 这是我的html文件
<p-table #warddt [columns]="cols" [value]="wards" [(selection)]="selectedWard"
[paginator]="true" [rows]="5" [lazy]="false"
[pageLinks]="5" [totalRecords]="totalRecordsCount" [responsive]="true" [loading] = "loading"
(onLazyLoad)="loadWardsLazy($event)" dataKey="title">
<ng-template pTemplate="caption">
<div style="text-align:right">
<button type="button" pButton icon="fa fa-plus" (click)="showDialogToAdd()" label="Create Ward"></button>
</div>
Wards List
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th style="width: 3em">
<p-tableHeaderCheckbox [value] = "ward" ></p-tableHeaderCheckbox>
</th>
<th *ngFor="let col of columns" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
<th>
Action
</th>
</tr>
<!-- filters code -->
<tr>
<th style="width: 3em">
</th>
<th *ngFor="let col of columns" [ngSwitch]="col.field">
<input *ngSwitchCase="'title'" pInputText type="text" (input)="warddt.filter($event.target.value, col.field, col.filterMatchMode)">
<input *ngSwitchCase="'code'" pInputText type="text" (input)="warddt.filter($event.target.value, col.field, col.filterMatchMode)">
<input *ngSwitchCase="'head_name'" pInputText type="text" (input)="warddt.filter($event.target.value, col.field, col.filterMatchMode)">
<input *ngSwitchCase="'location'" pInputText type="text" (input)="warddt.filter($event.target.value, col.field, col.filterMatchMode)">
</th>
<th style="width: 3em">
</th>
</tr>
<!-- end filters code -->
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData">
<td>
<p-tableCheckbox [value]="rowData"></p-tableCheckbox>
</td>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
<td class="text-center">
<a style="cursor: pointer;" (click)="action(rowData, 'edit')" class="ui-g-2">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</a>
<span class="ui-g-2">|</span>
<a style="cursor: pointer;" (click)="action(rowData, 'Delete')" class="ui-g-2">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</td>
</tr>
</ng-template>
<ng-template pTemplate="summary" >
<ul >
<li *ngFor="let ward of selectedWard" style="text-align: left">
{{ward.title + ' - ' + ward.code + ' - ' + ward.location + ' - ' + ward.head_name}}
</li>
</ul>
</ng-template>
</p-table>
<p-dialog header="Ward Details" [(visible)]="displayDialog" [responsive]="true"
showEffect="fade" [modal]="true" [style]="{width: '300px'}">
<div class="ui-g ui-fluid" *ngIf="createWard">
<div class="ui-g-12">
<div class="ui-g-4">
<label for="vin">Ward No.</label>
</div>
<div class="ui-g-8">
<input pInputText id="vin" [(ngModel)]="createWard.title" />
</div>
</div>
<div class="ui-g-12">
<div class="ui-g-4">
<label for="year">Ward Name</label>
</div>
<div class="ui-g-8">
<input pInputText id="year" [(ngModel)]="createWard.code" />
</div>
</div>
<div class="ui-g-12">
<div class="ui-g-4">
<label for="brand">Location</label>
</div>
<div class="ui-g-8">
<input pInputText id="brand" [(ngModel)]="createWard.location" />
</div>
</div>
<div class="ui-g-12">
<div class="ui-g-4">
<label for="color">Ward Head Name</label>
</div>
<div class="ui-g-8">
<input pInputText id="color" [(ngModel)]="createWard.head_name" />
</div>
</div>
</div>
<p-footer>
<div class="ui-dialog-buttonpane ui-helper-clearfix">
<button type="button" pButton icon="fa fa-close" (click)="deleteWard()" label="Delete"></button>
<button type="button" pButton icon="fa fa-check" (click)="saveWard()" label="Save"></button>
</div>
</p-footer>
</p-dialog>
.ts文件代码为
export class WardComponent implements OnInit {
totalRecords: number;
loading: boolean;
wardFilterModel: any;
wardListing: any;
createWard: WardInterface;
constructor(public rest: WardService, private route: ActivatedRoute,
private router: Router, private messageService: MessageService,
private jsonWardsService: JsonWardsService, public http: HttpClient,
private alertService: AlertService) { }
displayDialog: boolean;
ward: any;
selectedWard: WardInterface;
newWard: boolean;
wards: WardInterface[];
cols: any = {};
wardItems: any;
JsonWards: any;
ngOnInit() {
this.cols = [
{ field: 'title', header: 'Ward No' },
{ field: 'code', header: 'Ward Name' },
{ field: 'location', header: 'Location' },
{ field: 'head_name', header: 'Ward Head Name' },
];
this.loading = true;
}
showDialogToAdd() {
this.newWard = true;
this.ward = {};
this.displayDialog = true;
}
saveWard() {
if (Object.keys(this.createWard).length === 0 ||
this.createWard.title === undefined ||
this.createWard.code === undefined ||
this.createWard.location === '' ||
this.createWard.head_name === ''
) {
this.alertService.showMessage('Please fill required details', '', MessageSeverity.error);
} else {
const wards = [...this.wards];
if (this.newWard) {
wards.push(this.ward);
this.alertService.showMessage('Ward Created Successfully!', this.ward.data, MessageSeverity.success);
} else {
wards[this.wards.indexOf(this.selectedWard)] = this.createWard;
this.alertService.showMessage('Ward Updated Successfully!', this.selectedWard.code, MessageSeverity.success);
}
this.wards = wards;
// this.ward = null;
this.displayDialog = false;
}
}
deleteWard() {
const index = this.wards.indexOf(this.selectedWard);
this.wards = this.wards.filter((val, i) => i !== index);
this.ward = null;
this.displayDialog = false;
this.alertService.showMessage('Ward Deleted Successfully!', this.selectedWard.code, MessageSeverity.success);
}
action(data: WardInterface, type: string) {
this.selectedWard = data;
this.newWard = false;
this.createWard = this.cloneWard(data);
this.displayDialog = true;
}
cloneWard(c: WardInterface): WardInterface {
const ward = {};
for (const prop in c) {
ward[prop] = c[prop];
}
return ward;
}
}
这是我正在使用的界面代码。
export interface WardInterface {
id?;
tenent_id?;
language_id?;
title?;
code?;
head_name?;
location?;
remark?;
active?;
created_by?;
}
有人可以帮我吗。.让我知道是否还有其他要求。
答案 0 :(得分：0)
可能与您没有在表上指定selectionMode有关
即
selectionMode="multiple"