Html 类型'；可观察<；DataListItem[]>'；不可分配给类型'；数据列表项[]和#x27；

完整错误消息：

“类型“Observable”不可分配给类型“DataListItem[]”。 类型“Observable”中缺少属性“includes”。“

我正在使用material Table Schematic，现在我想从我的Rest服务中填写列表。 数据列表数据源.ts

import { DataSource } from '@angular/cdk/collections';
import { MatPaginator, MatSort } from '@angular/material';
import { map } from 'rxjs/operators';
import { Observable, of as observableOf, merge } from 'rxjs';
import { AuthService } from '../auth.service';


export interface DataListeItem {
  name: string;
  id: number;
  email: string;
  number: number;
}

export class DataListeDataSource extends DataSource<DataListeItem> {
  data: DataListeItem[] = this.authservice.GetUser(); <-- error here!

  constructor(private paginator: MatPaginator, private sort: MatSort, private authservice: AuthService) {
    super();
  }


  connect(): Observable<DataListeItem[]> {

    const dataMutations = [
      observableOf(this.data),
      this.paginator.page,
      this.sort.sortChange
    ];


    this.paginator.length = this.data.length;

    return merge(...dataMutations).pipe(map(() => {
      return this.getPagedData(this.getSortedData([...this.data]));
    }));
  }

  disconnect() { }

  private getPagedData(data: DataListeItem[]) {
    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
    return data.splice(startIndex, this.paginator.pageSize);
  }

  private getSortedData(data: DataListeItem[]) {
    if (!this.sort.active || this.sort.direction === '') {
      return data;
    }

    return data.sort((a, b) => {
      const isAsc = this.sort.direction === 'asc';
      switch (this.sort.active) {
        case 'name': return compare(a.name, b.name, isAsc);
        case 'email': return compare(a.email, b.email, isAsc);
        case 'id': return compare(+a.id, +b.id, isAsc);
        case 'number': return compare(+a.number, +b.number, isAsc);
        default: return 0;
      }
    });
  }
}
function compare(a, b, isAsc) {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

import { Injectable } from '@angular/core';
import { HttpHeaders, HttpClient } from '../../node_modules/@angular/common/http';
import { Observable } from '../../node_modules/rxjs';
import { DataListeItem } from './data-liste/data-liste-datasource';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private http: HttpClient) { }

  GetUser(): Observable<DataListeItem[]> {
    return this.http.get<DataListeItem[]>("DataListeItem.online");
  }

从'@angular/cdk/collections'导入{DataSource}；
从“@angular/material”导入{MatPaginator，MatSort}；
从“rxjs/operators”导入{map}；
从“rxjs”导入{observeable，of as observeof，merge}；
从“../auth.service”导入{AuthService}；
导出接口数据列表项{
名称：字符串；
id：编号；
电子邮件：字符串；
编号：编号；
}
导出类DataListDataSource扩展了DataSource{
数据：DataListItem[]=this.authservice.GetUser（）{
返回this.getPagedData（this.getSortedData（[…this.data]）；
}));
}
断开连接（）{}
私有getPagedData（数据：DataListItem[]）{
const startIndex=this.paginator.pageIndex*this.paginator.pageSize；
返回data.splice（startIndex，this.paginator.pageSize）；
}
私有getSortedData（数据：DataListItem[]）{
如果（！this.sort.active | | this.sort.direction==“”）{
返回数据；
}
返回数据。排序（（a，b）=>{
const isAsc=this.sort.direction=='asc'；
开关（this.sort.active）{
案例“name”：返回比较（a.name、b.name、isAsc）；
案例“电子邮件”：返回比较（a.电子邮件、b.电子邮件、isAsc）；
案例“id”：返回比较（+a.id、+b.id、isAsc）；
案例“编号”：返回比较（+a.number、+b.number、isAsc）；
默认值：返回0；
}
});
}
}
功能比较（a、b、isAsc）{
回报率（a

auth.service.ts

import { DataSource } from '@angular/cdk/collections';
import { MatPaginator, MatSort } from '@angular/material';
import { map } from 'rxjs/operators';
import { Observable, of as observableOf, merge } from 'rxjs';
import { AuthService } from '../auth.service';


export interface DataListeItem {
  name: string;
  id: number;
  email: string;
  number: number;
}

export class DataListeDataSource extends DataSource<DataListeItem> {
  data: DataListeItem[] = this.authservice.GetUser(); <-- error here!

  constructor(private paginator: MatPaginator, private sort: MatSort, private authservice: AuthService) {
    super();
  }


  connect(): Observable<DataListeItem[]> {

    const dataMutations = [
      observableOf(this.data),
      this.paginator.page,
      this.sort.sortChange
    ];


    this.paginator.length = this.data.length;

    return merge(...dataMutations).pipe(map(() => {
      return this.getPagedData(this.getSortedData([...this.data]));
    }));
  }

  disconnect() { }

  private getPagedData(data: DataListeItem[]) {
    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
    return data.splice(startIndex, this.paginator.pageSize);
  }

  private getSortedData(data: DataListeItem[]) {
    if (!this.sort.active || this.sort.direction === '') {
      return data;
    }

    return data.sort((a, b) => {
      const isAsc = this.sort.direction === 'asc';
      switch (this.sort.active) {
        case 'name': return compare(a.name, b.name, isAsc);
        case 'email': return compare(a.email, b.email, isAsc);
        case 'id': return compare(+a.id, +b.id, isAsc);
        case 'number': return compare(+a.number, +b.number, isAsc);
        default: return 0;
      }
    });
  }
}
function compare(a, b, isAsc) {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

import { Injectable } from '@angular/core';
import { HttpHeaders, HttpClient } from '../../node_modules/@angular/common/http';
import { Observable } from '../../node_modules/rxjs';
import { DataListeItem } from './data-liste/data-liste-datasource';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private http: HttpClient) { }

  GetUser(): Observable<DataListeItem[]> {
    return this.http.get<DataListeItem[]>("DataListeItem.online");
  }

从'@angular/core'导入{Injectable}；
从“../../node_modules/@angular/common/http”导入{HttpHeaders，HttpClient}”；
从“../../node_modules/rxjs”导入{Observable}”；
从“./data liste/data liste datasource”导入{DataListeItem}；
@注射的({
providedIn:'根'
})
导出类身份验证服务{
构造函数（私有http:HttpClient）{}
GetUser（）：可观察{
返回此.http.get（“DataListeItem.online”）；
}

因此，总而言之，我如何给我的休息者打电话，并显示列表。 我应该直接在“datalistedatasource.ts”中进行调用，还是应该在服务中进行调用

---

感谢阅读

您需要使用可观察而不是DataListItem[]

data: Observable<DataListeItem[]> = this.authservice.GetUser();

data:Observable=this.authservice.GetUser（）；