我正在尝试将二级数据动态绑定到 dxi-column。如何使用 *ngFor 指令设置数据？
Code from .ts File :
this.SummaryData = [
{
"columnName": "Total FCT",
"propertyType": "Impact",
"own_PT": 100,
"own_NPT": 101,
"own_Total": 201,
"compititor": [
{
"comp_PT": 100,
"comp_NPT": 101,
"comp_Total": 201,
"channelName": "Channel 1"
},
{
"comp_PT": 100,
"comp_NPT": 101,
"comp_Total": 201,
"channelName": "Channel 2"
},
{
"comp_PT": 100,
"comp_NPT": 101,
"comp_Total": 201,
"channelName": "Channel 3"
}
]
}, {
"columnName": "Total FCT",
"propertyType": "Regular",
"own_PT": 985,
"own_NPT": 2340,
"own_Total": 3325,
"compititor": [
{
"comp_PT": 100,
"comp_NPT": 101,
"comp_Total": 201,
"channelName": "Channel 1"
},
{
"comp_PT": 100,
"comp_NPT": 101,
"comp_Total": 201,
"channelName": "Channel 2"
},
{
"comp_PT": 100,
"comp_NPT": 101,
"comp_Total": 201,
"channelName": "Channel 3"
}
]
}
,
{
"columnName": "Total GRP",
"propertyType": "Impact",
"own_PT": 0,
"own_NPT": 0,
"own_Total": 0,
"compititor": [
{
"comp_PT": 100,
"comp_NPT": 101,
"comp_Total": 201,
"channelName": "Channel 1"
},
{
"comp_PT": 100,
"comp_NPT": 101,
"comp_Total": 201,
"channelName": "Channel 2"
},
{
"comp_PT": 100,
"comp_NPT": 101,
"comp_Total": 201,
"channelName": "Channel 3"
}
]
}, {
"columnName": "Total GRP",
"propertyType": "Regular",
"own_PT": 51.17,
"own_NPT": 94.01,
"own_Total": 145.18,
"compititor": [
{
"comp_PT": 6969.47,
"comp_NPT": 7979.12,
"comp_Total": 14948.58,
"channelName": "Channel 1"
},
{
"comp_PT": 6969.47,
"comp_NPT": 7979.12,
"comp_Total": 14948.58,
"channelName": "Channel 2"
},
{
"comp_PT": 6969.47,
"comp_NPT": 7979.12,
"comp_Total": 14948.58,
"channelName": "Channel 3"
}
]
}
];
Code from .html file
<dx-data-grid name="gridContainerProjectiveSummary" [dataSource]="SummaryData" [showColumnLines]="true"
[showRowLines]="true" [showBorders]="true"
[allowColumnReordering]="true" [allowColumnResizing]="true" [columnAutoWidth]="true">
<dxo-grouping [autoExpandAll]="false"></dxo-grouping>
<dxo-export [enabled]="true" fileName="Post-Eval(RO)"></dxo-export>
<dxo-selection mode="none"></dxo-selection>
<dxi-column dataField="columnName" caption="" [groupIndex]="0" cellTemplate="columnNameTemplate" [width]="75" cssClass="columnBold">
</dxi-column>
<dxi-column dataField="" caption="" [width]="100"></dxi-column>
<dxi-column dataField="propertyType" caption="Property type" cellTemplate="propertyTypeTemplate" [width]="125" cssClass="columnBold"></dxi-column>
<dxi-column caption="own">
<dxi-column caption="PT" dataField="own_PT"></dxi-column>
<dxi-column caption="NPT" dataField="own_NPT"></dxi-column>
<dxi-column caption="Total" dataField="own_Total"></dxi-column>
</dxi-column>
<dxi-column data *ngFor="let column of compititor" [caption]="column.channelName">
<dxi-column caption="PT" [dataField]="column.comp_PT"></dxi-column>
<dxi-column caption="NPT" [dataField]="column.comp_NPT"></dxi-column>
<dxi-column caption="Total" [dataField]="column.comp_Total"></dxi-column>
</dxi-column>
<dxo-summary>
<dxi-group-item column="own_PT" summaryType="sum" displayFormat="{0}" [showInGroupFooter]="false" [alignByColumn]="true">
<dxo-value-format type="fixedPoint" precision="2"></dxo-value-format>
</dxi-group-item>
<dxi-group-item column="own_NPT" summaryType="sum" displayFormat="{0}" [showInGroupFooter]="false" [alignByColumn]="true">
<dxo-value-format type="fixedPoint" precision="2"></dxo-value-format>
</dxi-group-item>
<dxi-group-item column="own_Total" summaryType="sum" displayFormat="{0}" [showInGroupFooter]="false" [alignByColumn]="true">
<dxo-value-format type="fixedPoint" precision="2"></dxo-value-format>
</dxi-group-item>
<dxi-group-item column="comp_PT" summaryType="sum" displayFormat="{0}" [showInGroupFooter]="false" [alignByColumn]="true" valueFormat="fixedPoint"></dxi-group-item>
<dxi-group-item column="comp_NPT" summaryType="sum" displayFormat="{0}" [showInGroupFooter]="false" [alignByColumn]="true" valueFormat="fixedPoint"></dxi-group-item>
<dxi-group-item column="comp_Total" summaryType="sum" displayFormat="{0}" [showInGroupFooter]="false" [alignByColumn]="true" valueFormat="fixedPoint"></dxi-group-item>
</dxo-summary>
<div *dxTemplate="let data of 'columnNameTemplate'" class="center">
{{data.data.columnName}}
</div>
<div *dxTemplate="let data of 'propertyTypeTemplate'" class="center ">
{{data.data.propertyType}}
</div>
</dx-data-grid>
如何将comititor（第二级）绑定到dxi-column内的每个column.comp_PT，column.comp_NPT，column.comp_Total，column.channelName？如果你们能帮助我获得解决方案，将不胜感激。