Angular 2 Kendo UI Grid 顯示外鍵文本

Question

我有一個類似購物車的系統，用於使用 Angular 4 和 ASP.NET CORE WEB API 的 PO。 我有兩個主要調用獲取 PO 詳細信息，然后是特定 PO 的所有“購物車”行項目。 我在表中有相關​​的資金類別 ID 和項目 ID，因為財務人員需要調整這些。 我需要獲取 Kendo UI 網格來顯示相關外鍵的文本。 我將很快實現編輯，因此使用 ng-template 但正在處理顯示文本值的非編輯視圖。 office id 是一個簡單的整數，office 數據以 JSON 格式返回 id 和 name

HTML

<kendo-grid
    [data]="view | async"
    [pageSize]="gridState.take"
    [skip]="gridState.skip"
    let-dataItem="dataItem">
    <kendo-grid-column field="productName" title="Product Name">
        <ng-template kendoGridEditTemplate let-dataItem="dataItem">
            <input [(ngModel)]="dataItem.productName" name="productName" class="k-textbox" />
        </ng-template>
    <kendo-grid-column>
    <kendo-grid-column field="officeId" **<!--Fix here??-->** title="Office">
        <ng-template kendoGridEditTemplate let-dataItem="dataItem">
            <kendo-dropdownlist name="officeName"
                [data]="office"
                [textField]="'name'"
                [valueField]="'id'"
                [valuePrimitive]="true"
                [(ngModel)]="dataItem.officeId">
            </kendo-dropdownlist>
        </ng-template>
    <kendo-grid-column>
    ...
</kendo-grid>

打字稿

public po: PO = {
    id: 0,
    poNumber: '',
    ...
}
public cart: Cart[] = [{
    id: 0,
    productName: '',
    officeId: 0,
    ...
}];

office: any[];
...

constructor(
    private route: ActivatedRoute,
    private router: Router,
    private cartService: CartService,  //has cart items
    private referenceService: ReferenceService  //has office FK and text value
    @Inject(CartEditService) editServiceFactory: any){
    route.params.subscribe(p => {
        this.po.id = +p['id'] || 0;
    });

    this.cartEditService = editServiceFactory();
    this.view = this.cartEditService.map(data => process(data, this.gridState));
}

ngOnInit(){
     //todo implement check for new po or existing
     this.cartService.getPo(this.po.id).subscribe(po => this.po = po);
     this.cartEditService.read(this.po.id);

     this.referenceService.getOffices().subscribe(office => this.office = office)
     ...
}

//To Do add the action handlers for grid

由於 topalkata 添加了解決方案

HTML

<kendo-grid-column title="Office">
    <ng-template kendoGridCellTemplate let-dataItem>
        {{getOfficeNameById(dataItem.officeId)}}
    </ng-template>
    <ng-template kendoGridEditTemplate let-dataItem="dataItem">
            <kendo-dropdownlist name="officeName"
                [data]="office"
                [textField]="'name'"
                [valueField]="'id'"
                [valuePrimitive]="true"
                [(ngModel)]="dataItem.officeId">
            </kendo-dropdownlist>
        </ng-template>
    <kendo-grid-column>

打字稿

public office: Reference[] = [{
    id: 0,
    name: ''
}];
...
public getOfficeNameById(id: number){
    return this.office.find(office => office.id === id).name;
}

再次感謝！！ 我沒有足夠的代表來投票答案。

Answer 1

您可以使用Cell 模板並將內容綁定到一個方法，該方法將通過 ID 返回 Office 名稱（ID 作為 dataItem 的一部分可用，可在模板中訪問），例如：

<kendo-grid-column field="CategoryID" title="Category">
          <ng-template kendoGridCellTemplate let-dataItem>
            {{getCategoryNameById(dataItem.CategoryID)}}
          </ng-template>
        </kendo-grid-column>
...
public categories = [{
  CategoryID: 1,
  CategoryName: 'Beverages'
}, {
  CategoryID: 2,
  CategoryName: 'Condiments'
}, { 
  CategoryID: 7,
  CategoryName: "Produce",
}, { 
  CategoryID: 6,
  CategoryName: "Meat/Poultry",
}, { 
  CategoryID: 8,
  CategoryName: "Seafood",
}];

public getCategoryNameById(id: number) {
  return this.categories.find(c => c.CategoryID === id).CategoryName;
}

例子