我有一个基于主子结构的角形反应形式。 在子部分中,用户可以按表格形式创建多行。每行中都有Prime NG对话框,其中包含每行的属性。通过单击每个行记录中的链接可以打开此对话框。
我单击了第一行记录对话框,然后将数据保存在该属性中。现在,当我单击第二行记录对话框时,相同的值会出现在我为第一行记录所放置的属性上。如果我在第二行记录对话框中更改了attribute的值,那么它会反映在第一行对话框中。
我之前在引导程序模型中遇到了几乎相似的问题,但是通过更改每个引导程序模态的ID来获得解决方案。但是,相同的解决方案不适用于Prime NG对话框。
BootStrap Modal issue in angular 6
我正在证明我的反应式表单的行部分的代码,其中还附加了对话框。
<div class="container-fluid table-responsive tableFixHead">
<table class="table table-striped">
<thead>
<tr class="info">
<th style="width: 5%;">Line Num</th>
<th style="text-align: center;">Item</th>
<th style="text-align: center;">Description</th>
<th style="text-align: center;width: 10%;">Quantity</th>
<th style="text-align: center;width: 10%;">Price</th>
<th style="text-align: center;width: 10%;">Total</th>
<th style="text-align: center;">Additional Info</th>
<th style="text-align: center;">Delete</th>
</tr>
</thead>
<tbody formArrayName="trxLines">
<tr *ngFor="let line of invFormReact.get('trxLines').controls; let i = index"
[formGroupName]="i">
<td><input pInputText readonly type="text" class="form-control" formControlName="lineNum">
</td>
<td> <input pInputText type="text" class="form-control" formControlName="lineItem"></td>
<td><input pInputText type="text" class="form-control" formControlName="lineDesc"></td>
<td style="width: 10%;"><input pInputText type="text" class="form-control"
formControlName="lineQuantity" (change)="onTotalChange(i)"></td>
<td style="width: 10%;"><input pInputText type="text" class="form-control"
formControlName="linePrice" (change)="onTotalChange(i)"></td>
<td style="width: 10%;"><input readonly pInputText type="text" class="form-control"
formControlName="lineTotal"></td>
<td style="text-align: center;"> <a style="cursor: pointer" [style.pointer-events]="'auto'"
[attr.data-target]="'#dialog'+i"
[style.color]="''" (click)="onClickLinePop()">
<img src="../../assets/images/popup-icon-2.jpg" class="img-fluid"
alt="Responsive image" style="width: 18px;" align="center">
</a></td>
<td style="text-align: center;"><a style="cursor: pointer" [style.pointer-events]="'auto'"
[style.color]="''" (click)="onDeleteRow(i)">
<span class="glyphicon glyphicon-trash" style="margin-top: 5px;"></span>
</a>
</td>
<p-dialog [id]="'dialog'+i" header="Line Additional Information" [(visible)]="openLinePopup" [modal]="true"
[responsive]="true" [style]="{width: '1200px'}" positionLeft="300" positionTop="200"
[transitionOptions]="'500ms'" maximizable="true">
<div class="row">
<div class="col-sm-3 col-md-3 col-xs-12 form-group">
<label style="display:inline-block;text-align: left;"
[for]="'line'+i+'attr'" class="col-form-label">
Attribute1:
</label>
<input type="text" [id]="'line'+i+'attr'" pInputText
[formControlName]="lineattr">
</div>
</div>
</p-dialog>
</tr>
</tbody>
</table>
</div>