Question

我是Angular的新手，在尝试检索REST Post调用返回的数据时遇到了问题，并在数据表（mat-table）中显示内容。 REST Get call工作正常。下面是从控制台复制的文件和错误（编译好的代码）。我不确定下一步该尝试什么。任何建议都非常感谢。

user.model.ts的内容：

    export interface User {  
    first_name: string;  
    last_name: string;  
}

usertable.component.ts的内容：

    import { Component, OnInit } from '@angular/core';  
import { UserService } from '../../services/user.service';  
import { Observable } from 'rxjs/Observable';  
import 'rxjs/add/observable/of';  
import {DataSource} from '@angular/cdk/collections';  
import { User } from '../../models/user.model';  
@Component({  
  selector: 'usertable',  
  templateUrl: './usertable.component.html',  
  styleUrls: ['./usertable.component.css']  
})  
export class UsertableComponent implements OnInit {  
  dataSource = new UserDataSource(this.userService);  
  displayedColumns = ['first_name', 'last_name'];  
  constructor(private userService: UserService) { }  
  ngOnInit() {  
  }  
}  
export class UserDataSource extends DataSource<any> {  
  constructor(private userService: UserService) {  
    super();  
  }  
  connect(): Observable<User[]> {  
    return this.userService.getUser();  
  }  
  disconnect() {}  
}

usertable.component.html

的内容

    <div class="">  
  <mat-table [dataSource]="dataSource">  
    <ng-container matColumnDef="first_name">  
      <mat-header-cell *matHeaderCellDef> first_name </mat-header-cell>  
      <mat-cell *matCellDef="let user"> {{user.first_name}} </mat-cell>  
    </ng-container>  
    <ng-container matColumnDef="last_name">  
      <mat-header-cell *matHeaderCellDef> last_name </mat-header-cell>  
      <mat-cell *matCellDef="let user"> {{user.last_name}} </mat-cell>  
    </ng-container>  
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>  
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>  
  </mat-table>  
</div>

user.service.ts的内容：

    import { Injectable }   from '@angular/core';  
import { HttpClient, HttpHeaders }   from '@angular/common/http';  
import { Observable }   from 'rxjs/Observable';  
import 'rxjs/add/operator/map';  
import { User } from '../models/usertwo.model';  
@Injectable()  
export class UserService {  
  private serviceUrl = 'http://localhost:3000/search';  
  constructor(private http: HttpClient) { }  
  getUser(): Observable<User[]> {      
    // this get works fine  
    return this.http.get<User[]>(this.serviceUrl);  

    // this post does post data but data returned won't show up in mat-table --- see error detail below  
    // const testObj = {  "first_name": "Jane", "last_name": "Doe" };  
    // const ContentHeaders = new HttpHeaders({ 'Content-Type': 'application/json' });  
    // return this.http.post(this.serviceUrl, JSON.stringify(testObj), { headers: ContentHeaders });    
  }  
}

错误：

core.es5.js:1020 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed  
at DefaultIterableDiffer.diff (core.es5.js:6843)  
at MatTable.CdkTable._renderRowChanges (table.es5.js:633)  
at SafeSubscriber.eval [as _next] (table.es5.js:605)  
at SafeSubscriber.__tryOrUnsub (Subscriber.js:240)  
at SafeSubscriber.next (Subscriber.js:187)  
at Subscriber._next (Subscriber.js:128)  
at Subscriber.next (Subscriber.js:92)  
at TakeUntilSubscriber.Subscriber._next (Subscriber.js:128)  
at TakeUntilSubscriber.Subscriber.next (Subscriber.js:92)  
at MapSubscriber._next (map.js:85)core.es5.js:1020 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed  
at DefaultIterableDiffer.diff (core.es5.js:6843)  
at MatTable.CdkTable._renderRowChanges (table.es5.js:633)  
at SafeSubscriber.eval [as _next] (table.es5.js:605)  
at SafeSubscriber.__tryOrUnsub (Subscriber.js:240)  
at SafeSubscriber.next (Subscriber.js:187)  
at Subscriber._next (Subscriber.js:128)  
at Subscriber.next (Subscriber.js:92)  
at TakeUntilSubscriber.Subscriber._next (Subscriber.js:128)  
at TakeUntilSubscriber.Subscriber.next (Subscriber.js:92)  
at MapSubscriber._next (map.js:85)

在Postman中返回的REST Post数据：

  {  
"resultCount": 2,      
"users": [   
    {  
                "first_name": "Bill",  
                "last_name": "Jones"  
    },  
    {  
                "first_name": "Ted",  
                "last_name": "Smith"  
    }     
]

}

REST获取Postman中返回的数据：

        {  
                "first_name": "Bill",  
                "last_name": "Jones"  
    },  
    {  
                "first_name": "Ted",  
                "last_name": "Smith"  
    }

具有数据返回的Angular 4 Datatable REST Post

0 个答案: