Угловые результаты с данными: Ошибка при попытке сравнить '[объект Object]'. В таблице данных разрешены только массивы и итерации.

У меня есть простой запрос, чтобы получить некоторых пользователей из API, используя метод публикации httpClient в Angular 5.

Я получаю правильный ответ, но не могу понять, как показать их в таблице данных.

Вот что я пробовал:

user.service.ts

import { stringify } from '@angular/core/src/util';
import { Router } from '@angular/router';
import { AuthenticationService } from '../../_services';
import { CookieService } from 'ngx-cookie-service';
import { Injectable } from '@angular/core';
import { Createuser } from '../../users/shared/userlist.model';
import { Http, Response, Headers, RequestOptions, RequestMethod } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import { Location } from '@angular/common';
@Injectable()

export class UserService {
    authService: any;
    selectedCreateUser: Createuser;
    createuserList: Createuser[] = [];
    createuserList1: Createuser[] = [];

    constructor(private http: Http, private location: Location, private cookieService: CookieService,
        private authenticationService: AuthenticationService, private router: Router) { }
    getUsers() {
        const headers = new Headers({ 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + this.authenticationService.token });
        const options = new RequestOptions({ method: RequestMethod.Get, headers: headers });
        return this.http.get('/api/user/' + this.authenticationService.userinfo.namespace + '/' + this.authenticationService.userinfo.userid
            + '/' + this.authenticationService.userinfo.sid, options)
            .map((response: Response) => response.json());
    }
}

orders.component.ts

import { CreateuserComponent } from '../../users/createuser/createuser.component';
import { DataService1 } from '../shared/datatable.service';
import { Observable } from 'rxjs/Observable';
import { Component, OnInit, Inject, ViewChild, Injectable, ChangeDetectorRef } from '@angular/core';
import { Http, Response, Headers, RequestOptions, RequestMethod } from '@angular/http';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { MatTableDataSource } from '@angular/material';
import { MatPaginatorModule } from '@angular/material';
import { MatPaginator, MatSort } from '@angular/material';
import { Router } from '@angular/router';
import { DataSource } from '@angular/cdk/collections';
import { map } from 'rxjs/operators';
import {  AuthenticationService } from '../../_services';
import { Createuser } from '../shared/userlist.model';
import { HttpClientModule } from '@angular/common/http';
import { UserService } from '../shared/user.service';

@Component({
    selector: 'app-userlist',
    templateUrl: './userlist.component.html',
    styleUrls: ['./userlist.component.scss']
})
// @Injectable()
export class UserlistComponent implements OnInit {
    displayedColumns = ['FirstName', 'LastName', 'MiddleName', 'UserName'];
    dataSource: MatTableDataSource<Createuser>;
    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;
    user: Createuser;
    users: Createuser[] = [];
   constructor(private ref: ChangeDetectorRef, private userService: UserService,
        private http: Http, private dataService: DataService1, private router: Router) {
        }

    ngOnInit() {
        this.ref.detectChanges();
        this.userService.getUsers();
        setTimeout(() => this.ref.markForCheck());
        this.refresh();
        this.userService.getUsers().subscribe((data) => {
            this.users = data;
            console.log('#####users inside ngonit', this.users);
            this.dataSource = new MatTableDataSource(this.users);
            this.ref.detectChanges();
            this.dataSource.paginator = this.paginator;
            this.dataSource.sort = this.sort;
        });

    }
   }

order.model.ts

export class Createuser {
    firstname: string;
    lastname: string;
    middlename: string;
    username: string;
}

orders.component.html

<mat-card>

<mat-table #table [dataSource]="dataSource">

    <ng-container matColumnDef="FirstName">
        <mat-header-cell *matHeaderCellDef> First Name </mat-header-cell>
        <mat-cell *matCellDef="let user"> {{ user.firstname }} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="LastName">
        <mat-header-cell *matHeaderCellDef> Last Name </mat-header-cell>
        <mat-cell *matCellDef="let user"> {{ user.lastname }} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="MiddleName">
        <mat-header-cell *matHeaderCellDef> Middle Name</mat-header-cell>
        <mat-cell *matCellDef="let user"> {{ user.middlename}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="UserName">
        <mat-header-cell *matHeaderCellDef> User Name</mat-header-cell>
        <mat-cell *matCellDef="let user"> {{ user.username}} </mat-cell>
    </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>
</mat-card>

Я получаю только заголовок таблицы в браузере и следующее:

ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

в консоли.

Следующий ответ - это то, что я создал файл схемы:

{
    "layoutSections": [
        {
            "layoutColumns": [
                {
                    "layoutItems": [
                        {
                            "className": "flex-1",
                            "type": "input",
                            "name": "firstname",
                            "label": "Name",
                            "required": true,
                            "value": "",
                            "group": "second"
                        },
                        {
                            "className": "flex-1",
                            "type": "input",
                            "name": "middlename",
                            "label": "Middle Name",
                            "required": false,
                            "value": "",
                            "group": "first"
                        },
                        {
                            "className": "flex-1",
                            "type": "input",
                            "name": "lastname",
                            "label": "Last Name",
                            "required": true,
                            "value": "",
                            "group": "first"
                        },
                        {
                            "className": "flex-1",
                            "type": "input",
                            "name": "username",
                            "label": "User Name",
                            "required": true,
                            "value": "",
                            "group": "second"

                       }
}
]
}
]
}
]
}

В консоли я получаю

Ошибка консоли