Angular 4 Primeng 4 datatable - 加載嵌套json

我想加載下面的json到primeng數據表中。我有問題設置列名Angular 4 Primeng 4 datatable - 加載嵌套json

[ 
    { 
    "accountId": 1, 
    "accountName": "Environmental Service Ltd", 
    "addressBook": { 
     "addressBookId": 1, 
     "companyId": 1, 
     "addressList": [ 
     { 
      "addressLine1": "ABC", 
      "addressLine2": "XYZ", 
      "addressLine3": "TUV", 
      "city": "ALY", 
      "postCode": "AB9 7RT" 
     } 
     ] 
    } 
    } 
]

我的代碼是在這裏

<p-dataTable #dtAccounts [value]="accounts"> 
    <p-header>Accounts</p-header> 
    <p-column field="accountName" header="Account Name" [sortable]="true"></p-column> 
    <p-column field="telephone" header="Account Phone" [sortable]="true"></p-column> 
    <p-column field="addressLine1" header="Street"></p-column> 
    <p-column field="city" header="City"></p-column> 
    <p-column field="state" header="State/Province"></p-column> 
    <p-column field="postCode" header="Zip/Postal Code"/> 
</p-dataTable>

來源

2017-05-25 Rashid Awan

您面臨的問題究竟是什麼？你的意思是「accountName」列嗎？ – Hoisel

這是錯誤的：'，應該是： '但它仍然只會填充表中的'accountName'，這取決於JSON的外觀。 – Alex

你的代碼存在一些問題：

的數據模型不匹配的列定義：
- 數據模型上不存在「電話」字段
- 數據模型中不存在「state」字段
- 「addressLine1」，「city」，「postcode」不適合數據模型（它們位於嵌套的「addressBook」對象的「addressList」數組內。每個「addressList」數組都具有嵌套的對象，具有這些屬性）
- <p-column field="postCode" header="Zip/Postal Code"/>組件標記不能自動關閉。使用</p-column> to close <p-column ...>。

這應該工作：

<p-dataTable #dtAccounts [value]="accounts"> 
     <p-header>Accounts</p-header> 
     <p-column field="accountName" header="Account Name" [sortable]="true"></p-column> 
    </p-dataTable>

爲了使你可以用戶模板列中的嵌套地址列表，像這樣：

<p-dataTable #dtAccounts [value]="accounts" tableStyleClass="table table-hover table-striped"> 
       <p-header>Accounts</p-header> 
       <p-column field="accountName" header="Account Name" [sortable]="true"></p-column> 
       <p-column field="addressList" header="Address List"> 
        <ng-template let-account="rowData" pTemplate="body"> 
         <ul> 
          <li *ngFor="let address of account.addressBook.addressList"> 
           {{address.addressLine1}} - {{address.addressLine2}} - {{address.city}}- {{address.postCode}} 
          </li> 
         </ul> 
        </ng-template> 
       </p-column> 
      </p-dataTable>

或者你可以考慮使用最適合您的日曆的另一個組件，如primeng/treetable。

我希望這有助於！

來源

2017-05-25 15:45:30 Hoisel

Angular 4 Primeng 4 datatable - 加載嵌套json

回答

相關問題