如何在剑道网格的 angular 8 下拉列表中绑定嵌套数组?

南希

如何在 angular 8 下拉列表中绑定嵌套数组?我想绑定attrValuedropdown图像中给出的

[{
    "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"

}]

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

在此处输入图片说明

阿德里塔·夏尔马

像这样尝试:

剑道网格:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在剑道网格中隐藏密码

如何在Angular JS中打印嵌套数组

如何在Angular中遍历嵌套数组

如何在剑道网格中获取复选框的值

如何在剑道网格中获取当前的排序字段?

如何在Angular FormArray中动态绑定ngSelect下拉列表

如何在Angular的嵌套数组中进行双向数据绑定

如何在ReactJS中从嵌套数组动态生成下拉列表

如何在Angular 8中选择下拉列表时生成表

如何在网格底部添加新行?剑道 UI Angular 2/4

如何在 Angular 8 中创建动态下拉菜单

如何在angular 8和bootstrap whit row,col和list字符串中创建动态网格组件?

如何在 CSS 中对齐 Angular 网格?

如何在angular2的表单数组中显示嵌套数组数据?

如何在Angular 8中实现嵌套NG If else条件

如何在jspdf angular8中显示嵌套的Json

如何在Angular 8中创建和指向嵌套组件

如何在asp的内建剑道网格中单击“编辑”按钮的同时在下拉列表中获取“选定项”

如何在Angular 8中循环iframe

如何在Angular 8中获取数组中变量的计数

如何在Angular 7中使用ngFor循环动态嵌套数组

如何在angular api调用中显示嵌套数组对象

如何在Angular 8中映射两个数组

如何在剑道网格中以编程方式添加组和组总和

如何在剑道网格模板中修复未终止的字符串文字

如何在剑道网格中手动设置列值

如何在剑道网格中在欧元和Procent之间切换

如何在剑道网格中获取自定义添加行的对象?

如何禁用剑道网格列中的按钮