typescript - 无法读取未定义的属性“VmsUserRoles”

问题描述

我正在使用一个角度应用程序，所以我有一个模型可以映射到我在 api 中拥有的模型（这个模型与从 api 返回的模型具有相同的属性）。我有一个 API 方法，它返回一个用户列表以及分配给每个用户的角色（这意味着一个用户可以有多个角色分配给他们）。这似乎在 API 上工作正常，但是在前端我收到一个错误，显示“TypeError：无法读取未定义的属性 'VmsUserRoles'”

我为列表用户功能创建了模型、角度服务、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>

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

旁注：下面是我的 api 返回的 json 对象，它已经过测试（我在我的 API 中添加了 swagger）

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

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

标签： typescriptangular5

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

typescript - 无法读取未定义的属性“VmsUserRoles”

问题描述

解决方案

推荐阅读