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

在打字稿文件中，添加以下代码：

vm.list: any = [];

将数组传递给vm.list

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

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

如何填充Angular 2中的p-dataTable？

1 个答案: