无法读取未定义的属性 'VmsUserRoles'

Question

我正在开发一个 angular 应用程序，所以我的模型完全映射到 api 中的模型（该模型与 return 中的模型具有相同的属性api)。我有一个 API 方法，该方法 return 是一个用户列表以及分配给每个用户的角色（这意味着一个用户可以分配给他们多个角色）。这似乎在 API 上工作正常但是在前端我收到一个错误 "TypeError: Cannot read property 'VmsUserRoles' of undefined"

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

这是我的模型，它必须映射到我从 api

returning 得到的模型

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

//我的 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 对象我的 api returns，它已经过测试（我在 API 上添加了 swagger）

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

无法读取未定义的属性 'VmsUserRoles'

Cannot read property 'VmsUserRoles' of undefined

typescript

angular5

无法读取未定义的 属性 'VmsUserRoles'

Cannot read property 'VmsUserRoles' of undefined

typescript

angular5

无法读取未定义的属性 'VmsUserRoles'