Angular 角度数据表结果：尝试区分'；[对象对象]'；。数据表中只允许使用数组和iterables

在Angular 5中，我使用httpClient-post方法通过一个简单的查询从API获取一些用户

我得到了正确的响应，但我不知道如何在数据表中显示它们

以下是我尝试过的：

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());
    }
}

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;
        });

    }
   }

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

订单.组件.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());
    }
}

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;
        });

    }
   }

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>

在控制台中

以下响应是我创建的架构文件：

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

                       }
}
]
}
]
}
]
}

在控制台中，我得到了

---

您有唯一的用户吗

然后你可以做：

this.userService.getUsers().subscribe((data) => {
      //If is an uniq object with "firstname", we create an array of only one
      //element, else return data
      this.users=(data.firstname)? [data]:data
      this.dataSource = new MatTableDataSource(this.users);
      ...
});

---

无论如何，如果您创建了多个用户，请检查响应

您应该删除无用的代码，只在问题中添加一些小代码，没有人会阅读这么多代码。由于数据源不是数组，因此您会出现错误。是的，谢谢你suggestion@AbhishekEkaanth我们如何解决这个问题？请你提供准确的解决方案。这正是我所缺少的！非常感谢你节省了我的时间。