Question

在这种情况下，我在制作数据表时遇到了问题。我将要管理的数据是json对象的嵌套数组，因此我希望在这里找到答案：）

这是我可以使用的代码片段的示例。

{{ user?.referredUser?.list[0]?.status }}

但这不适合，因为稍后此用户列表将随着用户数量的增加而不断增加。

<table class="table table-hover table-condensed" id="DataTable" [mfData]="reffered" #mf="mfDataTable"
         [mfRowsOnPage]="25" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
           <thead>
               <tr>
                   <th class="v-align-middle" style="width:10%">
                        <mfDefaultSorter>Name</mfDefaultSorter>
                   </th>
                   <th class="v-align-middle" style="width:10%">
                           <mfDefaultSorter>Status</mfDefaultSorter>
                   </th>
                   <!-- <th class="v-align-middle" style="color: #369; width:10%;" data-hide="phone,tablet"> Action
                   </th> -->
               </tr>
           </thead>
           <tbody>
             <!-- <tr *ngFor="let user.referredUser.list[0] of mf.data; let i = index"> -->
             <tr>
                 <!-- <td class="v-align-middle"><span class="muted">
                 <img src="{{ helper.getImageUrl(appConfig, user) }}" class="list-logo">
                 {{ user?.referredUser?.list[0]?.name | titlecase }}</span></td> -->
                 <td class="v-align-middle"><span class="muted">
                 <input type="image" img src="{{ helper.getImageUrl(appConfig, user) }}" class="list-logo" data-toggle="tooltip" [routerLink]="['/user/' + user?.referredUser?.list[0]?.id + '/listdetail']"><br>
                 {{ user?.referredUser?.list[0]?.name | titlecase }}</span></td>
                 <td class="v-align-middle"><span class="muted"> {{ user?.referredUser?.list[0]?.status }} </span></td>
                 <!-- <td class="v-align-middle"><a class="muted" data-toggle="tooltip" [routerLink]="['/user/' + user?.referredUser?.list[0]?.id + '/listdetail']"><i
                   class="material-icons">border_color</i>
               </a></td> -->
             </tr>
             <!-- <tr *ngIf="!list || list.length <= 0">
                   <td colspan="4" align="center"> No data found. </td>
             </tr> -->
           </tbody>
            <tfoot>
             <tr>
               <td colspan="3">
                <mfBootstrapPaginator [rowsOnPageSet]="[10,25,50]"></mfBootstrapPaginator>
               </td>
             </tr>
           </tfoot>
        </table>

当前出现的仅是我在[]中编写的用户列表上

这是我的json

{
  "status": true,
  "data": {
    "id": "-LhKgaOz90Rg21Y_PCxz",
    "address": [],
    "age": 23,
    "company": "",
    "createdAt": "2019-06-14T11:14:43.318Z",
    "referredBy": "",
    "referredUser": {
        "total": 5,
        "list": [
            {
                "id": "-LhidpFKI86szc92Tu_X",
                "name": "john",
                "status": "ACTIVE"
            },
            {
                "id": "-LhizE4bQiliDv_PjLxk",
                "name": "doe",
                "status": "ACTIVE"
            },
            {
                "id": "-LhkOpj5tDNhHeiCm4S8",
                "name": "jane",
                "status": "ACTIVE"
            },
            {
                "id": "-LhkQPJ5hhLJlsbtnpnr",
                "name": "doe",
                "status": "ACTIVE"
            },
            {
                "id": "-LhmZVyBWbC6ceERUdjC",
                "name": "frend",
                "status": "INACTIVE"
            }
        ]
    },
    "socialAbout": "-",
    "socialProfession": "Event organizer"
  }
}

这是我的ts

    import { Component, OnInit } from '@angular/core';
import { ApiService } from '@service/api.service';
import { Helper } from '@common/helper';
import * as AppConfig from '../../../environments/AppConfig';

@Component({
  selector: 'app-influencerrank',
  templateUrl: './influencerrank.component.html',
  styleUrls: ['./influencerrank.component.css']
})
export class InfluencerrankComponent implements OnInit {

    constructor(public apiService: ApiService,
        public helper: Helper
    ) {
        this.appConfig = AppConfig;
    }
    public sortBy: 'createdAt';
    public sortOrder: 'desc';
    public appConfig: any;
    users: any;
    public mainUsers: any;

    ngOnInit() {
        this.apiService.postCall(this.apiService.usersList, { 'startFrom': '' }, (response) => {
            if (response.status === true) {
                this.mainUsers = response.data;
                this.users = response.data.filter((item: any) => item.userType === 'LEADER');
        });
            } 
        });
    }

}

Answer 1

尝试一下

<tr *ngFor="let user of mf.data.referredUser.list">
  <td>
    {{ user.name | titlecase }}
  </td>

  <td>
    {{ user.status }}
  </td>
</tr>

如何处理json上的嵌套数组对象形式的数据？

1 个答案: