Question

我正在开发一个有角度的应用程序，因此我有一个模型可以精确映射到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上加了大招）

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

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

Answer 1

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

进行排序

{} == []

添加以下代码似乎对我来说是不可思议的 {} == {}

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

1 个答案: