如何在 angular 8 下拉列表中绑定 kendo 网格中的嵌套数组？

Question

如何在angular 8 下拉列表中绑定嵌套数组？我想将 attrValue 绑定到图像

中给出的值 dropdown

[{
    "ProductID" : 1,
    "Attribute" : "Aspect Ratio",
    "attrValue" : ["1.78","1.85","2.35","2.39","2.40"],
    "Pref" : "true"


}, {
   "ProductID" : 2,
    "Attribute" : "Frame Rate",
    "attrValue" : ["23.98","24","25","29.97"],
    "Pref" : "true"

}, {
    "ProductID" : 3,
    "Attribute" : "Format",
    "attrValue" : ["ProRes"],
    "Pref" : "false"

}, {
    "ProductID" : 4,
    "Attribute" : "Standard",
    "attrValue" : ["HD","HD 1080.23.98 psf","UHD","HDR","UHD SDR","SD"],
    "Pref" : "false"

}, {
    "ProductID" : 5,
    "Attribute" : "Formatted Blacks",
    "attrValue" : ["Yes","No"],
    "Pref" : "true"

}]

Component.ts

public ngOnInit(): void { 
     this.GetCompEditorAreaService.getCompEditorArea().subscribe(data => { 
          this.gridData = data;

    if(this.gridData.length>0){
          this.listAttrVal=[]; 
           for(var i=0;i<this.gridData.length;i++){ 
                this.listAttrVal=this.gridData[i].attrValue;
           }
       }
    });
  }

HTML

<kendo-grid-column field="attrValue" title="Value" width="120">
      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex"> 
         <kendo-dropdownlist [data]="listAttrVal [formControl]="formGroup.get('attrValue')"></kendo-dropdownlist> 
     </ng-template> 
</kendo-grid-column>

enter image description here

Answer 1

这样试试：

Kendo-网格：

Kendo-Grid Working Demo

<kendo-grid [data]="data" [height]="370">
    <kendo-grid-column field="Attribute" title="Attribute" width="40">
    </kendo-grid-column>

    <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
        <ng-template kendoGridCellTemplate let-dataItem>
            <select >
               <option *ngFor="let x of dataItem.attrValue" [value]="x" >{{x}}</option>
            </select>
        </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="Pref" title="Pref" width="120">
        <ng-template kendoGridCellTemplate let-dataItem>
            <input type="checkbox" [checked]="dataItem.Pref" />
        </ng-template>
    </kendo-grid-column>

</kendo-grid>

HTML Table:

Working Demo

<table>
    <tr *ngFor="let item of data;let i = index">
        <td>
            {{item.Attribute}}
        </td>
        <td>
            <select [(ngModel)]="item.value">
                <option *ngFor="let x of item.attrValue" [value]="x" >{{x}}                              </option>
            </select>
        </td>
        <td>
            <input type="checkbox"  [(ngModel)]="item.Pref" />
        </td>
    </tr>
</table>

Answer 2

更好的kendo执行下拉操作的方法是：

<kendo-grid-column [headerClass]="{'kendoColumn': true}" field="cDiv" title="Division"
        width="90">
          <ng-template kendoGridEditTemplate let-dataItem="dataItem">
            <kendo-dropdownlist [data]="divList" textField="name" valueField="id"></kendo-dropdownlist>
          </ng-template>
</kendo-grid-column>

如何在 angular 8 下拉列表中绑定 kendo 网格中的嵌套数组？

How to bind nested array in angular 8 dropdownlist in kendo grid?

multidimensional-array

kendo-ui

kendo-grid

angular

angular8