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

回答

相关问题