Как связать вложенный массив в угловом выпадающем списке 8 в сетке кендо? - PullRequest
Новая
       69

Как связать вложенный массив в угловом выпадающем списке 8 в сетке кендо?

0 голосов
/ 24 октября 2019

Как связать вложенный массив в угловом выпадающем списке 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>

введите описание изображения здесь

1 Ответ

1 голос
/ 24 октября 2019

Попробуйте так:

Кендо-сетка:

Демонстрация работы с кендо-сеткой 

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