错误TypeError：data.slice不是函数

Question

ERROR TypeError: data.slice is not a function
#atMatTableDataSource.push../node_modules/@angular/material/esm5/table.es5.js.MatTableDataSource._orderData (table.es5.js:742)

#at MapSubscriber.project (table.es5.js:675)
#atMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:35)
#atMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)

我正在使用JSON响应，并尝试通过有角度的材质垫表在UI中显示它。请找到随附的代码段，并让我知道我编写的代码中有什么错误，或者我需要更改方法来实现此目的

JSON Web服务

{
"data": [
{
  "action": "Ok",
  "created_user": "slstst5",
  "latest_instance": 7713997,
  "modified_dt": "Thu, 12 Jul 2018 06:27:32 GMT",
  "no_of_btl": 159,
  "request": 238244193,
  "sales_rep": "slstst5",
  "status_cd": "Submitted to Prov."
},

服务

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {sot} from './sot.model';
import { Observable } from "rxjs";

@Injectable({
providedIn: 'root'
})
export class SotServiceService {
private serviceUrl ="service URL";

constructor(private http : HttpClient) { }
getuser():Observable<sot[]>{
  return this.http.get<sot[]>(this.serviceUrl);
}
}

table.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { Observable } from "rxjs";
import {MatSort, MatSortable, MatTableDataSource,PageEvent, MatPaginator} 
from '@angular/material';
import {SotServiceService} from '../sot-service.service';

@Component({
selector: 'app-sot-table',
templateUrl: './sot-table.component.html',
styleUrls: ['./sot-table.component.css']
})
export class SotTableComponent implements OnInit {
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator : MatPaginator;
dataSource;
//displayedColumns = ['id', 'name', 'username', 'email', 'phone', 'website'];
displayedColumns = ['request', 'status_cd', 'sales_rep', 'created_user', 
'modified_dt', 'action','no_of_btl'];
//displayedColumns=['userId','id','title','body']
constructor(private sotservice :SotServiceService) { }

ngOnInit() {
this.sotservice.getuser().subscribe(result => {

  if(!result){
    return ;
  }
  this.dataSource= new MatTableDataSource(result);
  this.dataSource.sort= this.sort;
  this.dataSource.paginator=this.paginator;
 })
 }

}

错误快照：

Answer 1

当您在错误的数据类型上使用 slice 函数时，有时会发生这种情况。Slice 作用于数组，而不是对象。您可能会尝试切片对象。

Answer 2

您的data对象在对象内部result。您需要执行以下操作：

ngOnInit() {
  this.sotservice.getuser()
    .subscribe(result => {
      if(!result){
        return;
      }

      this.dataSource= new MatTableDataSource(result.data);
      this.dataSource.sort= this.sort;
      this.dataSource.paginator=this.paginator;
  });
}

Answer 3

发生的原因是您试图切片一个对象。Slice 适用于数组，而不适用于对象。