我可以为 Ag 网格硬编码行数据吗？

Question

我想手动定义 ag-grid 行数据。因为对于我想在 UI 上显示的相同结构，我的数据库中没有相同的数据结构。

我想按摩行数据，让它显示我想要的显示方式：

this.columnDefs = [
  {headerName: 'Field Name', field: 'fieldName', valueFormatter: valueFormatter},
  {headerName: 'My Trade', field: 'myTrade', valueFormatter: valueFormatter},
  {headerName: 'Cpty Trade', field: 'cptyTrade', valueFormatter: valueFormatter}
];

if (this.LinkedTrade) {

  this.rowData = [
    {
      fieldName: 'Trade Date',
      myTrade: this.LinkedTrade[0].mlpTrade.tradeDate,
      cptyTrade: this.LinkedTrade[0].cptyTrade.tradeDate
    },
    {
      fieldName: 'Counter Party',
      myTrade: this.LinkedTrade[0].mlpTrade.counterparty.name,
      cptyTrade: this.LinkedTrade[0].cptyTrade.counterparty.name
    },
    {
      fieldName: 'Notional',
      myTrade: this.LinkedTrade[0].mlpTrade.notional,
      cptyTrade: this.LinkedTrade[0].cptyTrade.notional
    },
    {
      fieldName: 'Effective Date',
      myTrade: this.LinkedTrade[0].mlpTrade.effectiveDate,
      cptyTrade: this.LinkedTrade[0].cptyTrade.effectiveDate
    },
    {
      fieldName: 'Maturity Date',
      myTrade: this.LinkedTrade[0].mlpTrade.maturityDate,
      cptyTrade: this.LinkedTrade[0].cptyTrade.maturityDate
    },
    {
      fieldName: 'Action',
      myTrade: this.LinkedTrade[0].mlpTrade.action,
      cptyTrade: this.LinkedTrade[0].cptyTrade.action
    },
    {
      fieldName: 'Transaction Type',
      myTrade: this.LinkedTrade[0].mlpTrade.transactionType,
      cptyTrade: this.LinkedTrade[0].cptyTrade.transactionType
    },
    {
      fieldName: 'Clearing House',
      myTrade: this.LinkedTrade[0].mlpTrade.clearingHouse,
      cptyTrade: this.LinkedTrade[0].cptyTrade.clearingHouse
    }
  ];
}

现在表格显示为空白...我不知道这是否是正确的方法。 LinkedTrade 是我从父组件解析的数据源。

预期的结果是我们有 3 列字段名称、我的交易、Cpty 交易。我想手动填写如下数据。

谁能帮我解决这个问题？

<div class="pl-lg-3 pr-lg-5">
  <div class="row">
    <div class="w-100" *ngIf="LinkedTrade">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col-md-auto pr-sm-1"><h4 class="text-secondary">Status:</h4></div>
            <div class="col-md-auto pr-sm-1"><h4 class="text-danger">{{LinkedTrade[0].status}}</h4></div>
          </div>
          <table width="50%">
            <tr>
              <td>
                <div class="card" style="width: 15rem; height:5rem">
                  <div class="card-body">
                    MX FCN: <strong>{{LinkedTrade[0].mlpTrade.murexRootContract}}</strong>
                    <br>
                    <p class="text-muted">MX NB: <strong>{{LinkedTrade[0].mlpTrade.murexNb}}</strong></p>
                  </div>
                </div>
              </td>
              <td>
                <div class="card" style="width: 15rem; height:5rem">
                  <div class="card-body">
                    <p class="text-muted">KX Position Id: <strong>{{getKxPositionId()}}</strong>
                      <br>
                      KX Id: <strong>{{getKxEventId()}}</strong></p>
                  </div>
                </div>
              </td>

              <td>
                <div class="card" style="width: 15rem; height:5rem">
                  <div class="card-body">
                    <p class="text-muted">MW Trade Id: <strong>{{LinkedTrade[0].cptyTradeId.mwTradeId}}
                      :{{LinkedTrade[0].cptyTradeId.mwTradeVersion}}</strong></p>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <br>
      <app-atlas-grid #tradeDetailsGrid
                      [rowData]="rowData"
                      [columnDefs]="columnDefs"
                      [floatingFilter]="false"
                      [enableFilterComponent]="false"
                      [pagination]="false"
                      style="height: 720px; width:100%;"
      ></app-atlas-grid>
      <br><br>
      <div class="col-auto">
        <button class="btn btn-sm btn-info pull-right" type="submit" (click)="closeTradeDetail()">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

我解决了这个问题，把它放在一个函数中 私有 setGridColumns() {}

不知怎的，它起作用了..