Angular 2 Kendo從字符串數組的網格

Question

我正在開發Angular 2 + Kendo UI的應用程序。

所以，我有一些圖像路徑，我想以表格形式顯示它。 我想要在表格行中顯示5列而不是1列。

我可以這樣做嗎？如果是的話，那麼怎麼看kendo grid html template and data for it？

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> 

打字稿組件：

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。