如何在 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"
}]
组件.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 [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] 删除。
我来说两句