簡體   English   中英

如何從JSON數組中獲取數據並在表中顯示數據?

[英]How to fetch data from JSON array and show data inside table?

所以在數據庫中我們有jsonChanges:string []參數。 Json看起來像......

"{"field":"referringPhysician","oldValue":"Medical oncologist","newValue":"Clinical oncologist"}"

在我的情況下,我需要在我的角度組件表中顯示oldValue和newValue。 編輯后用戶自動保存到數據庫中的這個值作為old和newValue但只在一個string []參數內。我需要以某種方式從這個數組中提取這些值並顯示它們。

1 - 我的桌子

    <table class="listing">
            <thead>
              <th class="table-column-min">User Name</th>
              <th class="table-column-min">Modified Date</th>
              <th class="table-column-min">Entity Name</th>
              <th class="table-column-min">Old Value</th>
              <th class="table-column-min">New Value</th>
            </thead>
            <tbody>
           <tr *ngFor="let at of auditTrailList | paginate: { itemsPerPage: _ITEMS_PER_PAGE, currentPage: crtPage, totalItems: totalItems }"
        [attr.data-row-id]="at.userId">
        <td>{{ at.userName }}</td>
        <td>{{ at.timestamp ? (at.timestamp | date:  CUSTOM_DATE_FORMAT ) :  'Unknown' }}</td>
        <td>{{ at.entityName }}</td>
        <td>TODO: old value</td>
        <td>TODO: new value</td>
      </tr>
    </tbody>

2 - 我的組件

    getList(patientId?: number, pageNo?: number) {
       const auditTrailSubscription = 
   this._auditTrailService.getAuditTrailUrl(patientId, pageNo, 
  GridConfig.ITEMS_PER_PAGE)
     .subscribe(
       result => {
          this.getPersonId();
          this.auditTrailList = result.lstRecords;
          this.totalItems = result.recordsCount;
       },
       err => {
        this.handleError(err);
      }
    );

  this.addSubscription("auditTrail", auditTrailSubscription);
}

當你有這個數組時,你可以存儲在組件中的變量中並傳遞給你的html文件,例如: this.allData={ "field":"referringPhysician", "oldValue":"Medical oncologist", "newValue":"Clinical oncologist" }

在您的HTML中,您可以顯示如下:

<td>{{allData.oldValue}}</td>
<td>{{allData.newValue}}</td>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM