Angular 2 Kendo UI Grid 显示外键文本

Question

我有一个类似购物车的系统，用于使用 Angular 4 和 ASP.NET CORE WEB API 的 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 template 并将内容绑定到将通过 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;
}

EXAMPLE