如何在Kendo网格的8号角下拉列表中绑定嵌套数组？我想将attrValue绑定到图像中给出的“值”下拉列表

Question

如何在角度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.listAttr.length>0){
          this.listAttrVal=[]; 
           for(var i=0;i<this.listAttr.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-Grid：

<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" disabled/>
        </ng-template>
    </kendo-grid-column>

</kendo-grid>

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>