javascript - 如何在 Angular 2 中填充 p-dataTable？

Question

最近我开始使用 Angular 2，所以我对如何从 TypeScript 文件填充 Angular 2 中的 p-dataTable 有一些疑问。让我向您展示我的代码...

我的 TypeScript 代码

@Component({
selector: 'app-request-assignClaim',
templateUrl: './request-assignClaim.component.html'
})

export class RequestAssignClaimComponent {

vm: RequestAssignViewModel;

constructor(
    private route: ActivatedRoute,
    private router: Router,
    private requestService: IRequestService,
    private growlService: GrowlService,
    private actionService: ActionService,
    private userService: UserService
) {
    this.vm = new RequestAssignViewModel();
    this.vm.isDisplayed = false;
}


showAssignClaims(request: RequestListItemViewModel): void {
    this.vm.request = request;
    this.loadAvailableUsers().subscribe(() => {
        this.vm.isDisplayed = true;
        this.assign();
    });
}

assign(): void {


    this.actionService.assignResponsible(this.vm.request.id, this.vm.request.responsible).subscribe(() => {

    }, (e: any) => {

        this.growlService.push({
            severity: "info",
            summary: "Error",
            detail: "An error occurred while assigning the claim to another user, please try again "
        });

    });

}

close(): void {
    this.vm.isDisplayed = false;
}

private loadAvailableUsers(): Observable<any> {
    return new Observable((o: Observer<any>) => {
        o.next(null);
        o.complete();
    });
}
}

我的 HTML

<p-dialog header="Assign claim" [(visible)]="vm.isDisplayed" [width]="700" >
<div class="ui-g">
    <div class="ui-g-12">


         <p-dataTable [value]="vm.list" selectionMode="none" 
[(selection)]="vm.selectedRequests" datakey="Id" [paginator]="true"
    [rows]="10" [responsive]="true">        

            <p-column field="name" [sortable]="true">
                {{ vm.request.name }}
            </p-column>

        </p-dataTable>

    </div>
    <div class="ui-g-12 align-right">
        <button pButton type="button" icon="ui-icon-close" label="Close" 
styleClass="flat" (click)="close()"></button>
        <button pButton type="button" icon="ui-icon-check" label="Assign" 
styleClass="flat"></button>
    </div>
</div>
</p-dialog>

所以，我明白为什么不起作用:(

如果有人可以帮助我，我真的很感激。

Answer 1

在 typescript 文件中，添加以下代码:

vm.list: any = [];

并将数组传递给vm.list

这样，[value] 将获得对象数组:

 <p-dataTable [value]="vm.list" selectionMode="none" 
[(selection)]="vm.selectedRequests" datakey="Id" [paginator]="true"
    [rows]="10" [responsive]="true">