Angular 2 Kendo Grid来自字符串数组

Question

我正在使用Angular 2 + Kendo UI开发应用程序。

所以，我有一系列图像路径，我想以表格形式显示它。 我希望代替表格行中的1列显示表格行中的5列。

我能这样做吗？如果是，那么如何看待 kendo网格html模板和数据呢？

Answer 1

因此，结果如下：

HTML模板（隐藏表格标题）：

<kendo-grid [data]="gridData">
    <ng-template ngFor [ngForOf]="columns" let-column>
        <kendo-grid-column field="{{column}}" [headerClass]="'hidden'">
            <ng-template kendoGridCellTemplate let-dataItem>
                <img *ngIf="dataItem[column].avatarUri != null" [src]="dataItem[column].avatarUri" [alt]="dataItem[column].keywords" />
             </ng-template>
        </kendo-grid-column>
    </ng-template>
</kendo-grid>

TypeScript组件：

gridData: any[];
columns: string[] = ["column0", "column1", "column2", "column3", "column4"];

ngOnInit() {
    this.avatarService.getAvatars()
        .subscribe((avatars: Array<Avatar>) => {
            this.gridData = [];
            let i = 0;
            while (i < avatars.length) {
                let obj = {};
                for (let column of this.columns) {
                    obj[column] = {
                        avatarUri: i >= avatars.length ? null : avatars[i].avatarUri,
                        keywords: i >= avatars.length ? null : avatars[i].keywords
                    };
                    i++;
                }
                this.gridData.push(obj);
            }
        });
}

还帮助链接dynamic columns。