Question

我有一个基于主子结构的角形反应形式。在子部分中，用户可以按表格形式创建多行。每行中都有Prime NG对话框，其中包含每行的属性。通过单击每个行记录中的链接可以打开此对话框。

我单击了第一行记录对话框，然后将数据保存在该属性中。现在，当我单击第二行记录对话框时，相同的值会出现在我为第一行记录所放置的属性上。如果我在第二行记录对话框中更改了attribute的值，那么它会反映在第一行对话框中。

我之前在引导程序模型中遇到了几乎相似的问题，但是通过更改每个引导程序模态的ID来获得解决方案。但是，相同的解决方案不适用于Prime NG对话框。

我正在证明我的反应式表单的行部分的代码，其中还附加了对话框。

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

Angular中的Prime-NG Modal问题

0 个答案: