角2：如何使我自己定製KendoGrid在角2

我有4個組件。我使用KendoGrid來顯示所有四個組件中的數據。但現在，我不想用來在所有四個組件中設置KendoGrid。爲此，我創建了一個子組件，在該組件中設置KendoGrid並從父組件傳遞數據。角2：如何使我自己定製KendoGrid在角2

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.html： 在此，我傳遞的gridView中的對象數組。

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

現在，項目的輸出是：

標題是未來正確的，但在價值的地方，我收到的對象。

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

請讓我知道自己做錯了什麼，我在這裏做什麼。

來源

2017-03-26 Er Vipin Sharma

你得到的翻譯：在單元格的值，因爲你不會訪問值，你必須爲如下代碼：

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

，你也不會過濾來自主數據源的任何列，所以你不需要列數組。您可以加載所有列的網格。從父組件

綁定：

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

（1）在所有的柱：

@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編列陣列（根據您的實現）：

@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>

來源

2017-08-04 11:57:30

角2：如何使我自己定製KendoGrid在角2

回答

相關問題