错误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."
},

Service.ts

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

您的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 2

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

Answer 3

此错误是由于您的Web服务返回的数组所致。 结果包含数据数组。为避免data.slice不是函数错误，您需要将结果指向Wesley Coetzee提到的result.data。 您也可以从服务中安全删除可观察到的内容。如果不确定Sot对象，请用任何对象替换或删除

P.S。 如果您在result.data中也有子数组，也会发生此错误。在这种情况下，您将执行以下操作： this.dataSource =新的MatTableDataSource（res.data.yourSubArray）;

Answer 4

我的可观察流从本地indexedDB存储（没有后端）返回数据，而我的错误是没有在将流参数分配给MatTableDataSource之前检查流参数的数组长度，这导致了相同的类型错误。这是我的解决方法：

ngOnInit() {
   this.dataStream = this.storageService.getDataStream().subscribe((activeDataList: any) => { 
      if (activeDataList.length) { 
         this.dataSource = new MatTableDataSource(activeDataList);
      }
   });
}

Answer 5

请尝试将这行this.dataSource = new MatTableDataSource(result);更改为this.datasource.result = results['Data']，然后将数据源像dataSource = new MatTableDataSource();这样在构造函数外部初始化

您在这里基本上要执行的操作是告诉您的代码我的结果中有一个名为Data的元素，因此请给我该元素的值或数据并将其分配给我的数据源，希望对您有所帮助类似的问题，这就是我的解决方法

Answer 6

您应该使用

this.dataSource = new MatTableDataSource(result.data);

因为json文件中有一个名为“ data”的键，其中包含数据对象的数组。

Answer 7

只需确保数据是表的期望数据的数组/列表，否则将无法切片。

简单

Answer 8

发生此错误是因为您尝试切片对象。切片适用于数组，而不适用于对象。