Как Сортировать Вложенный Объект Массива В Угловой 6

Question

Надеюсь, мой вопрос - не тот заголовок.

Я хочу отобразить данные из ответа JSON, чтобы они стали таблицей.Однако отображаемые данные представлены в виде вложенных массивов, и мне довольно сложно их расшифровать.

Я пытался их получить, но этот код все еще не работает, и я уверен, что это необходимоисправлено.

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

Для получения более подробной информации, я отображаю некоторые из кодов ниже:

table.html

<table class="table table-hover table-condensed" id="DataTable" [mfData]="referred" #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.referral = true;
             this.filter((item: any) => item.status != null);
          } else {
              this.referral = 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"
},

}

Надеюсь, кто-нибудь может мне помочь:)