Typescript 无法读取属性'；VMUserRoles'；未定义的

我正在处理一个angular应用程序，所以我有一个映射到api中的模型（这个模型与api返回的模型具有相同的属性）。我有一个API方法，它返回一个用户列表以及分配给每个用户的角色（这意味着一个用户可以分配多个角色）。这在API上似乎工作得很好，但是在前端，我遇到了一个错误，显示为“TypeError:Cannotreadproperty'VMUserRoles'of undefined”

我为列表用户功能创建了一个模型、角度服务、ts组件和html组件

这是我的模型，它必须映射到我从api返回的内容

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

这是我的html组件，它将从ts组件馈送

  <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>

然后我的服务

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');       
    }  
}

---

我的期望是在上看到分配给每个用户的所有用户角色，换句话说，我希望用户对象显示的确切次数与特定用户的角色数相同。

通过将整个VMUserRoles单元格代码更改为

        <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>

用户角色-->
{{UserRoles[role]}}

下面代码的添加似乎为我带来了魔力

---

这个例子远远不够minimal@GeorgeJempty公平地说，我所要做的就是发布足够多的信息，以便有人可以直接复制并通过他们的一方尝试复制这个问题。我最感兴趣的是ngFor部分，希望这能让事情稍微容易一点，你能上传一个版本在stack blitz上并分享链接，这样我们就知道问题出在哪里了？

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

        <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>