角2：角2で私自身のカスタムKendoGridを作る方法

Question

私は4つのコンポーネントを持っています。そして私は、4つのコンポーネントすべてにデータを表示するためにKendoGridを使用しています。しかし今、私は4つのコンポーネントすべてでKendoGridをセットアップするのに使いたくありません。このために、私はKendoGridを設定し、親コンポーネントからデータを渡す子コンポーネントを作成しました。

ChildComponent.ts：私の子コンポーネントを以下に示す

@Component({ 
    selector:"my-kendo-grid", 
    template:` 
     <kendo-grid [data]="dataVal"> 
      <template ngFor [ngForOf]="myArr" let-column > 
      <kendo-grid-column field="{{column}}" title="{{column}}" > 
       <template kendoCellTemplate let-dataItem> 
       <div>{{dataItem}}</div> 
       </template> 
      </kendo-grid-column> 
      </template> 
     </kendo-grid> 

export class ChildComponent implements OnInit { 
     @Input() dataVal:any; //taking dataVal value from parent component 
     myArr=[]; 

     ngOnInit({ 
       this._usersService.getUsers().subscribe((userResponse: any)=> { 
       for (var key in userResponse[0]) { 
        this.myArr.push(key); 
      } 
      return this.myArr; // binding 'myArr' in Kendogrid template which is making the kendogrid header 
     }); 
    } 
}) 
} 

そして、私のparentComponentの一つは次のようになります。

ParentComponent.html：これで 、私は合格していますがgridView内のオブジェクトの配列

<my-kendo-grid [dataVal]="gridView"></my-kendo-grid> 

今プロジェクトの出力は次のようになります。

ヘッダが適切に来ているが、値の代わりに、私は、オブジェクトを取得しています。

https://i.stack.imgur.com/L1RZt.png

私はここでやって何を間違った教えてください。あなたが値にアクセスするつもりはありませんので、

Answer 1

あなたはセル値の[オブジェクトのオブジェクト]を取得している、あなたは次のようにコーディングする必要があります。また、

<div>{{dataItem [column]}}</div> 

そして、あなたがメインのデータソースから任意の列をフィルタリングしていないので、あなたは、列配列は必須ではありません。すべての列でグリッドを読み込むことができます。親コンポーネントから

バインド：

@Input() height: number = 400; 
@Input() dataSource: any = null; 

ngOnChanges(changes: any) {   
    if (changes.dataSource != null && changes.dataSource.currentValue != null) { 
     this.SetDataSource(); 
    } 
} 


SetDataSource() { 
    if (this.dataSource != null) { 

    } 
} 

HTML：：

<kendo-grid [data]="dataSource" 
      [scrollable]="'scrollable'" 
      [height]="height" 
      [selectable]="true" 
      [sortable]="{ mode: 'multiple' }"> 
</kendo-grid> 

（1）Configurを持つすべての列を持つ

<gridView [height]="500" [dataSource]="dataSource"></gridView> 

（1） （実装ごとなど）された列配列：

@Input() height: number = 400; 
@Input() dataSource: any = null; 

public columns: any = []; 

ngOnChanges(changes: any) {   
    if (changes.dataSource != null && changes.dataSource.currentValue != null) { 
     this.SetDataSource(); 
    } 
} 


SetDataSource() { 
    if (this.dataSource != null) { 
     this.SetColumns(); 
    } 
}  

SetColumns(): any { 
    this.columns = []; 

    if (this.dataSource != null) { 
     let row = this.dataSource[0]; 
     this.columns = this.GetColumns(row); 
    } 
} 

protected GetColumns(obj: any): any { 
    let properties: any = []; 

    if (obj != null && typeof obj == "object") { 
     for (var property in obj) { 
      if (obj.hasOwnProperty(property)) { 
       if (property != '$type') { 
        let item: any = {}; 
        item.Name = property; 
        item.DisplayFormat = null; 
        item.CanSort = true; 
        item.CanFilter = true; 
        item.DataType = 'String'; 
        properties.push(item); 
       } 
      } 
     } 
    } 

    if (properties != null) 
     properties.sort(); 

    return properties; 
} 

public setStyles(): any { 
    let styles = { 
     'height': (this.height - 45) + 'px' 
    }; 

    return styles; 
} 

HTML：

<kendo-grid [ngStyle]="setStyles()" 
      [data]="dataSource" 
      [scrollable]="'scrollable'" 
      [height]="height" 
      [selectable]="true" 
      [sortable]="{ mode: 'multiple' }"> 

    <kendo-grid-column *ngFor="let col of columns;let i=index" field="{{col.Name}}" title="{{col.Name}}" 
         [sortable]="col.CanSort" 
         [width]="100">   

     <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex"> 
      <div class="gridCell">     
       {{dataItem[col.Name]}} 
      </div> 
     </ng-template> 
    </kendo-grid-column> 

</kendo-grid>