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

Angular 2 Kendo UI Grid显示外键文本

1 个答案: