如何解决在所有列中放置在表格单元格中的 p-dropdown 的模型更改会更改同一列另一行中 p-dropdwon 的值
所附的图像显示了数据在表格中的显示方式。 我有一个嵌套的 json 对象，如下所示。我在primeng ng表中显示为一行的主要对象，单击该行的行展开时，我将再次在primeng表中显示description属性下的数据。
{
"Installed":[
{
"id":"1#2","Operational_State":"Installed","A Sne-Shelf":"20917118-CN32SLOT","A Slot-Card":"SLOT-1-MOTR","Z Sne-Shelf":"20917120-CN32SLOT","Z Slot-Card":"SLOT-1-MOTR","Optical End":"20917118:1-3-1:20917120:1-2-1","Channel Capacity":"194.60-100GB","A Slot Available":"2","Z Slot Available":"1","Capacity Available":"40","Description":[
{
"id":"1#2#1","A_end":[
{
"A_Equipment":20917117,"A_Position":[
"1-6-2-1"
],"A_Status":"Potential","A_FORECASTED_SFP":[
"XFP 1310","SFP","gp"
]
}
],"Z_end":[
{
"Z_Equipment":20917119,"Z_Position":[
"1-3-2-1"
],"Z_Status":"Installed","Z_FORECASTED_SFP":[
"SFP 1310"
]
}
]
},{
"id":"1#2#2","A_Position":[
"1-6-1-1"
],"Z_Position":[
"1-3-1-1"
],{
"id":"1#2#3","A_Position":[
"1-6-3-1"
],"A_Status":"Installed","A_FORECASTED_SFP":[
"XFP 1310"
]
}
],"Z_Position":[
"1-3-3-1"
],"Z_Status":"Potential","Z_FORECASTED_SFP":[
"XFP 1310","MOTR"
]
}
]
},{
"id":"1#1#1","gp"
]
},{
"A_Equipment":20917117,"Z_FORECASTED_SFP":[
"SFP 1310"
]
}
]
}
]
}
]
}
相同的html
<p-table #dt [columns]="selectedColumns2" sortField="Operational_State" [resizableColumns]="true" (onFilter)="onFilter($event,dt)" columnResizeMode="expand" responsive="true" [defaultSortOrder]="-1"
[ngStyle]="{'width': 'auto'}" columnResizeMode="fit" selectionMode="single" [autoLayout]="true" [scrollable]="false" [value]="details" dataKey="id"
[paginator]="paginatorPlanned" [rows]="30" [(selection)]="selectedRecord" (onRowSelect)="onRowSelect($event)">
<ng-template pTemplate="caption" let-columns>
<div class="ui-helper-clearfix row" style="width:100%;">
<div class="col-md-4" [ngStyle]="{'text-align':'left'}">
<!-- <p-multiSelect [options]="cols" [(ngModel)]="selectedColumns2" optionLabel="header" maxSelectedLabels=0 selectedItemsLabel="{0} columns selected"
[ngStyle]="{minWidth: '200px'}" defaultLabel="Choose Columns">
</p-multiSelect> -->
</div>
<div class="col-md-2"></div>
<div class="col-md-6 ml-0" [ngStyle]="{'text-align':'right'}">
<button type="button" (click)="onResetAll($event,dt,dt1)" class="btn bt-button" [ngStyle]="{'margin-right': '0.5em','height': '35px'}">
<Span>Clear Filter</Span>
</button>
<button type="button" (click)="exportToExcel()" [ngStyle]="{'margin-right':'0.5em'}" class="btn bt-button ml-4">
<i class="fa fa-file-excel-o mr-2" aria-hidden="true"></i>
<span>Export</span>
</button>
</div>
</div>
<!-- <div>
<table>
<tr>
<th></th>
<th *ngFor="let col of selectedColumns2" [ngSwitch]="col.field" [ngStyle]="{'overflow': 'visible'}">
<p-multiSelect #cmp *ngSwitchCase=col.field [options]=col.options defaultLabel="Select Items" (onChange)="dt.filter($event.value,col.field,'in');updatefilter(dt,$event.value,col.field);"
selectedItemsLabel="{0} item selected" maxSelectedLabels=0 [(ngModel)]="selectedItem[col.field]" defaultLabel="Select Items"
(onChange)="dt.filter($event.value,'in')" selectedItemsLabel="{0} item selected" maxSelectedLabels=0
[styleClass]="selectedItem[col.field]!=null ? 'ui-default-label' : ''"></p-multiSelect>
</th>
</tr>
</table>
</div> -->
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr [ngStyle]="{'white-space':'Nowrap'}">
<th style="width: 3rem"></th>
<th [ngStyle]="{'width':'auto'}" *ngFor="let col of columns" pReorderableColumn [pSortableColumn]="col.field" pResizableColumn>
{{col.header}}
<p-sortIcon [field]="col.field" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
</th>
</tr>
<tr>
<th></th>
<th *ngFor="let col of columns" [ngSwitch]="col.field" [ngStyle]="{'overflow': 'visible'}">
<p-multiSelect #cmp *ngSwitchCase=col.field [options]=col.options defaultLabel="Select Items" (onChange)="dt.filter($event.value,col.field);"
selectedItemsLabel="{0} item selected" maxSelectedLabels=0 [(ngModel)]="selectedItem[col.field]" defaultLabel="Select Items"
(onChange)="dt.filter($event.value,'in')" selectedItemsLabel="{0} item selected" maxSelectedLabels=0
[styleClass]="selectedItem[col.field]!=null ? 'ui-default-label' : ''"></p-multiSelect>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns" let-expanded="expanded" let-rowIndex="rowIndex">
<tr *ngIf="rowGroupMetadata[rowData.Operational_State].index === rowIndex">
<td></td>
<td colspan="10">
<span class="p-text-bold p-ml-2" [class]="'route-badge-status-' + rowData.Operational_State">
{{rowData.Operational_State | uppercase}}
</span>
</td>
<!-- <button type="button" pButton pRipple [pRowToggler]="rowData" class="p-button-text p-button-rounded p-button-plain p-mr-2" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
<span class="p-text-bold p-ml-2">{{rowData.operational_state | uppercase}}</span> -->
</tr>
<tr [pSelectableRow]="rowData" [ngStyle]="{'white-space':'Nowrap'}">
<td>
<button type="button" pButton pRipple [pRowToggler]="rowData" class="p-button-text p-button-rounded p-button-plain" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'" title="Expand"></button>
<button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-warning ml-2" title="Draw" (click)="drawRoute(rowData)"></button>
</td>
<td *ngFor="let col of columns" class="ui-resizable-column">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-rowData>
<tr [ngStyle]="{'white-space':'Nowrap'}">
<td colspan="10">
<div class="" style="display: flex;justify-content: space-around;">
<div>
<p-table #dt2 [value]="rowData.Description" dataKey="id" styleClass="p-datatable-striped" [ngStyle]="{'width': 'auto'}" [paginator]="false" [rows]="10" [columns]="selectedDetailColumns">
<ng-template pTemplate="header">
<!-- <tr>
<th class="childHeader" colspan="3">ASNE</th>
<th class="childHeader" colspan="3">ZSNE</th>
</tr> -->
<tr>
<th class="childHeader" [ngStyle]="{'width':'auto'}" class="customheader1" *ngFor="let col of detailColumns" pReorderableColumn [pSortableColumn]="col.field" pResizableColumn>
{{col.header}}
<p-sortIcon [field]="col.field" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-detail let-rowIndex="rowIndex">
<tr>
<td *ngFor="let col of detailColumns; let i=index" class="ui-resizable-column">
<div *ngIf="col.showDropdown" style="margin-left:-8px;">
<!-- <p-dropdown #cmp1 [options]="initial?(detail|field:col:rowIndex): detail[col.subfield]" [(ngModel)]="detail[col.subfield]"
id="{{detail.id}}_{{col.subfield}}" scrollHeight="400px" appendTo="body" (onChange)="updateFields(dt2,$event,col,detail,rowIndex,rowData)"
dataKey="value" [styleClass]="detail[col.field]!=null ? 'ui-default-label' : ''">
</p-dropdown> -->
<p-dropdown #cmp1 [options]="initial?(detail|field:col:rowIndex): selectedField[col.subfield]" [(ngModel)]="selectedRowCol[rowIndex]" optionValue="label"
id="{{rowIndex}}_{{i}}_{{col.subfield}}" scrollHeight="400px" appendTo="body" (onChange)="updateFields(dt2,rowData,i)"
dataKey="value">
</p-dropdown>
</div>
<div *ngIf="!col.showDropdown">
<!-- <ng-container *ngFor="let item of detail[col.field]"> -->
{{initial?(detail|field:col:rowIndex): selectedField[col.subfield]}}
<!-- </ng-container> -->
</div>
</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
</td>
</tr>
</ng-template>
</p-table>
我创建了一个 forloop 来在每行列单元格中显示下拉列表。最初数据加载正确，但是当我更改一个下拉列表的值时，它会更改另一行中相同下拉列表的值。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
