Angular - 无法访问或查看表单输入框中网格中的选定数据答案

【问题标题】：Angular - Cannot access or view selected data from grid in form input boxAngular - 无法访问或查看表单输入框中网格中的选定数据
【发布时间】：2019-03-05 10:39:45
【问题描述】：

我在表单的输入框中显示单行数据时遇到问题。

网格视图：（数据存储在 selectedTrade 数组中）

<p-table [value]="trades" [paginator]="true" selectionMode="single" [(selection)]="selectedTrade">
  <ng-template pTemplate="body" let-trades>
    <tr [pSelectableRow]="trades">
      <td><button pButton #Buy name="Buy" type="button" (click)="showDialog()"></button>
      </td>
      <td><button pButton #Sell name="Sell" type="button" (click)="showDialog()"></button>
      </td>
      <td *ngFor="let col of cols">
        {{trades[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-table>

对话框涉及带有输入框的表单。当对话框打开时，我需要输入框中的 selectedTrade 数组的值。

selectedTrade Json 结构 { instrumentid : '1', instrument: 'Tesla', buyPrice: '2000', 'buyQty': '9', 'sellPrice':'5000','sellQty ':'25'}

我需要将其与输入绑定： Instrument 、 Transaction_Quantity 、 Transaction_Price ，具体取决于买入或卖出对话框。我在绑定或显示值时遇到问题。请帮忙。

<p-dialog header="Orders" [(visible)]="ordersDialog" [modal]="true">
<form name="editForm" role="form" novalidate (ngSubmit)="save(editForm.value)" #editForm="ngForm">
  <div>
    <input type="text" class="form-control" name="instrument_id" id="instrument_id" ngModel #instrument_id="ngModel" />
    <input type="text" class="form-control" name="at_price" id="field_at_price" ngModel #at_price="ngModel" />
    <input type="text" class="form-control" name="transaction_quantity" id="transaction_type" ngModel #transaction_quantity="ngModel" />
  </div>
  <button type="submit" class="btn btn-primary"> <span>Save</span></button>
</form>
</p-dialog>

【问题讨论】：

标签： angular primeng angular7 angular-ngmodel angular-forms

【解决方案1】：

如果你得到的数据比你需要的数据从你的模型（即你的 col ）中获取数据

&lt;input type="text" class="form-control" name="instrument_id" id="instrument_id" [(ngModel)]="col.instrument_id" /&gt;

【讨论】：

使用
{{ selectedTrade | json }}
在对话框中显示 json 结构。无法在输入中使用 selectedTrade.instrument_id 作为显示值。 col.instrument_id 不起作用。这是在不同的背景下。
您将 selectedTrade（即您的 json 模型）作为 selectedTrade.instrument_id 传递
它在 json 中有吗？检查json之前是否存在？？
{{ selectedTrade | json }} 在我的对话框中打印 json。它存在。
而不是添加 [(ngModel)]="selectedTrade.instrument_id" 这会获取您的 ID。（我认为您的模型名称 selectedTrade。如果这与在 selectedTrade 中添加该名称不同。