我有一个简单的查询，可以使用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());
}
}
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
在控制台中。
以下响应是我创建的Schema文件：
{
"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"
}
}
]
}
]
}
]
}
在控制台中我正在
答案 0 :(得分：0)
你有一个独特的用户???
然后你可以这样做：
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);
...
});
无论如何，如果您创建了多个用户，请检查响应