如何在Angular 6中对嵌套数组对象进行排序

Question

希望我的问题不是标题错误。 我想显示来自JSON响应的数据，以便它成为表。但是，显示的数据是以嵌套数组对象的形式出现的，我发现很难解密它们。

我尝试获取它，但是此代码仍然失败，并且我确定需要修复此问题。 {{用户？ .referredUser？ .list [0]？。名称}} {{用户？ .referredUser？ .list [0]？。状态}} 有关更多详细信息，我显示以下一些代码：

table.html

<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 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>
           </tbody>
            <tfoot>
             <tr>
               <td colspan="3">
                <mfBootstrapPaginator [rowsOnPageSet]="[10,25,50]"></mfBootstrapPaginator>
               </td>
             </tr>
           </tfoot>
        </table>

table.ts

ngOnInit() {
  this.activetedRoute.params.subscribe(params => {
      if (params['id']) {
          this.getUserData(params['id']);
          this.userid = params['id'];
      }
  });

}

 getUserData(id: any) {
  this.apiService.postCall(this.apiService.userProfile, { 'userId': id }, (response) => {
      if (response.status) {
          if (response.data.userType == "REGULAR") {
             this.refferal = true;
             this.filter((item: any) => item.status != null);
          } else {
              this.refferal = false;
          }
          this.user = response.data;
      } else {
          this.toasterService.error(response.message);
          this.route.navigate(['/user']);
      }
  });

} }

helper.ts

getImageUrl(appConfig, user) {
    if (user && user.referredUser && user.referredUser.list[0] && user.referredUser.list[0].photo && user.referredUser.list[0].photo.social && user.referredUser.list[0].photo.social.main.url) {
        return user.referredUser.list[0].photo.social.main.url;
    }
    return appConfig.DEFAULTIMAGEURL;
}

}

我的响应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": "angus",
                "status": "INACTIVE"
            },
            ....
        ]
    },
    "socialAbout": "-",
    "socialProfession": "Event organizer"
},

}

希望有人可以帮助我：）