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

最近我开始使用Angular 2，所以我对如何从TypeScript文件填充Angular 2中的p-dataTable有些疑问。 让我给你看我的代码

我的打字脚本代码

@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();
    });
}
}

@组件({
选择器：“应用程序请求分配声明”，
templateUrl:“./request assignClaim.component.html”
})
导出类RequestAssignClaimComponent{
vm:RequestAssignViewModel；
建造师(
专用路由：激活的路由，
专用路由器：路由器，
私有请求服务：IRequestService，
私人成长服务：成长服务，
私人actionService:actionService，
私有用户服务：用户服务
) {
this.vm=新的RequestAssignViewModel（）；
this.vm.isDisplayed=false；
}
showAssignClaims（请求：RequestListItemViewModel）：无效{
this.vm.request=请求；
此.loadAvailableUsers（）.subscribe（（）=>{
this.vm.isDisplayed=true；
这个.assign（）；
});
}
assign（）：void{
this.actionService.assignResponsible（this.vm.request.id，this.vm.request.responsible）。订阅（（）=>{
}，（e：任何）=>{
这是一个.growlService.push({
严重性：“信息”，
摘要：“错误”，
详细信息：“将声明分配给其他用户时出错，请重试”
});
});
}
close（）：void{
this.vm.isDisplayed=false；
}
私有loadAvailableUsers（）：可观察{
返回新的可观察对象（（o:观察者）=>{
o、 下一个（空）；
o、 完全（）；
});
}
}

我的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>

{{vm.request.name}

因此，我理解为什么不起作用：(

---

如果有人能帮助我，我非常感谢。

在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">

---

在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">

您没有初始化

vm.list

。因此，首先声明并初始化数据。您没有初始化

vm.list

。因此，首先声明并初始化数据。