title: Cannot read property 'VmsUserRoles' of undefined
body: <p>I am working an angular application, so I have model that maps to exactly what I have in the api(this model has same properties as the one return from the api). I have an API method that returns a list of user together with the roles assigned to each of these user(meaning one user can have multiple roles assigned to them). This seems to work fine on the API howver in the front end side I am getting an error that reads "TypeError: Cannot read property 'VmsUserRoles' of undefined"</p>
  
  <p>I have created a model, angular service, ts component and html component for the list users functionality </p>
  
  <p>This is my model which has to map to what I am returning from the api</p>
  
  <pre><code>{
      UserId: number;
      FirstName: string;
      Surname: string;
      UserIdentity: string;
      StationCode: string;
      IsDeleted : boolean;
      VmsUserRoles: number[];
  }
  
  </code></pre>
  
  <p>This is my html component that will feed from the ts component</p>
  
  <pre><code>  &lt;mat-form-field&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;label class="col-form-label"&gt;Search:&lt;/label&gt;&lt;/td&gt;
          &lt;td class="table-bordered"&gt;&lt;input matInput (keyup)="searchUser($event.target.value)" placeholder="" type="text"&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
  
    &lt;/mat-form-field&gt;
  
    &lt;mat-table class="table-bordered" [dataSource]="dataSource" matSort&gt;
  
      &lt;ng-container matColumnDef="FirstName"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; First Name &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let user"&gt; {{user.FirstName}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="VmsUserRoles"&gt;
        &lt;mat-selection-list #VmsUserRoles&gt;
          &lt;mat-list-option *ngFor="let user of user.VmsUserRoles"&gt;
            {{user}}         
          &lt;/mat-list-option&gt;
        &lt;/mat-selection-list&gt;
      &lt;/ng-container&gt;
  
      &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
  
    &lt;/mat-table&gt;
  
    &lt;mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"&gt;&lt;/mat-paginator&gt;
  &lt;/div&gt;
  
  </code></pre>
  
  <p>//My ts component which feeds the html</p>
  
  <pre><code>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=&gt;{
        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;    
    }
  
  }
  </code></pre>
  
  <p>Then my service</p>
  
  <pre><code>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&lt;VmsUser[]&gt;(this.baseApiUrl + 'v1/Account/AllVmsUsers');       
      }  
  }
  </code></pre>
  
  <p>Side note: below is the json object my api returns, it has been tested(I added swagger onto my API)</p>
  
  <pre><code>  {
      "UserId": 1,
      "FirstName": "Ronny",
      "Surname": "Ronza",
      "UserIdentity": "1111111111",
      "StationCode": "DF3",
      "IsDeleted": false,
      "VmsUserRoles": [
        4,
        6
      ]
    }
  ]
  </code></pre>
  
  <p>My expectation is to see all the user roles assign to each on the, in other words I want the user object to be displayed the exact number of times as the number of roles that a particular user has.</p>