Не удается прочитать свойство 'VmsUserRoles' из неопределенного

Question

Я работаю с угловым приложением, поэтому у меня есть модель, которая точно соответствует тому, что у меня есть в API (эта модель имеет те же свойства, что и возвращаемая из API).У меня есть метод API, который возвращает список пользователей вместе с ролями, назначенными каждому из этих пользователей (то есть одному пользователю может быть назначено несколько ролей).Кажется, что это работает нормально на API, как бы на стороне интерфейса я получаю сообщение об ошибке «TypeError: Не удается прочитать свойство VmsUserRoles of undefined»

Я создал модель, угловой сервис, компонент TSи HTML-компонент для функциональности списка пользователей

Это моя модель, которая должна сопоставляться с тем, что я возвращаю из API

{
    UserId: number;
    FirstName: string;
    Surname: string;
    UserIdentity: string;
    StationCode: string;
    IsDeleted : boolean;
    VmsUserRoles: number[];
}

Это мой HTML-компонент, который будет питаться от TScomponent

  <mat-form-field>
    <table>
      <tr>
        <td><label class="col-form-label">Search:</label></td>
        <td class="table-bordered"><input matInput (keyup)="searchUser($event.target.value)" placeholder="" type="text"></td>
      </tr>
    </table>

  </mat-form-field>

  <mat-table class="table-bordered" [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="FirstName">
      <mat-header-cell *matHeaderCellDef mat-sort-header> First Name </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.FirstName}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="VmsUserRoles">
      <mat-selection-list #VmsUserRoles>
        <mat-list-option *ngFor="let user of user.VmsUserRoles">
          {{user}}         
        </mat-list-option>
      </mat-selection-list>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

  </mat-table>

  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

// Мой компонент ts, который передает html

import { Component, OnInit, ViewChild } from '@angular/core';
import {Router} from '@angular/router';
import {MatTableDataSource, MatPaginator, MatSort} from '@angular/material';
import {UserManagmentService} from '../services/usermanagment.service';
import {VmsUser} from '../models/VmsUserModel';

@Component({
  selector: 'app-vms-usermanagment',
  templateUrl: './vms-usermanagment.component.html',
  styleUrls: ['./vms-usermanagment.component.scss']
})
export class VmsUsermanagmentComponent implements OnInit {
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  public vmsUsers: VmsUser[];

  constructor(private _router: Router, private _userManagmentService: UserManagmentService ) { }
  displayedColumns = ['FirstName'', 'VmsUserRoles']
  dataSource = new MatTableDataSource();

  ngOnInit() {
    this._userManagmentService.getAllVmsUsers()
    .subscribe(data=>{
      this.dataSource.data = data;
      this.dataSource.paginator = this.paginator;
    });
    console.log('it gets here ' + this.dataSource.data['VmsUserRoles'] )
  }

  ngAfterViewInit(){
    this.dataSource.sort = this.sort;
  }

  searchUser(searchValue: string){
    searchValue = searchValue.trim();
    searchValue.toLocaleLowerCase();
    this.dataSource.filter = searchValue;    
  }

}

Тогда мой сервис

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {VmsUser} from '../models/VmsUserModel';
import { environment } from 'src/environments/environment';
import { JsonPipe } from '@angular/common';

@Injectable()
export class UserManagmentService
{
    constructor(private _http: HttpClient){}

    baseApiUrl =  environment.serviceBaseUrl;

    getAllVmsUsers()
    {       
        return this._http.get<VmsUser[]>(this.baseApiUrl + 'v1/Account/AllVmsUsers');       
    }  
}

Примечание: ниже находится объект json my apiвозвращается, это было проверено (я добавил swagger в мой API)

  {
    "UserId": 1,
    "FirstName": "Ronny",
    "Surname": "Ronza",
    "UserIdentity": "1111111111",
    "StationCode": "DF3",
    "IsDeleted": false,
    "VmsUserRoles": [
      4,
      6
    ]
  }
]

Я ожидаю увидеть все роли пользователя, назначенные каждому на, другими словами, я хочу, чтобы объект пользователя отображалсяточное количество раз как количество ролей, которые имеет конкретный пользователь.

Answer 1

Удалось отсортировать его, изменив весь код ячейки VMSUserRoles на

        <mat-header-cell *matHeaderCellDef mat-sort-header> USER ROLES </mat-header-cell> -->
         <mat-cell *matCellDef="let user"> 
          <div class="form-group">
                <mat-label *ngFor="let role of user.VmsUserRoles;let i = index;">                     
                  {{UserRoles[role]}} <br>
                </mat-label>
        </div>
        </mat-cell>
      </ng-container>

Добавление приведенного ниже фрагмента кода, похоже, сделало для меня чудо <mat-cell *matCellDef="let user">