Angular 2 Kendo UI网格显示外键文本

Question

我有一个使用Angular 4和ASP.NET Core Web API的推车系统。我有两个主要的电话获取PO详细信息，然后获得了特定PO的所有"购物车"。我在表中有相关的资金类别ID和项目ID，因为财务人员需要调整这些资金。我需要获取Kendo UI网格以显示相关外键的文本。我将尽快实施编辑，因此NG-Template，但要使用显示文本值的非编辑视图。Office ID是一个简单的整数，Office数据返回JSON中的ID和名称

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

您可以使用单元模板并将内容绑定到将返回办公名称的方法（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;
}

示例