Javascript 类型为'的参数；认购'；不可分配给类型为的参数

我正在尝试将数据从数据库中提取到我的

angular

material

matdatatable

。但是在ts中，ıget这个错误：“Subscription”类型的参数不能分配给

ReservationList[]

类型的参数。 类型“Subscription”缺少类型

ReservationList[]

中的以下属性：长度、弹出、推送、concat和更多

这是我的datatable组件.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import { ReservationList } from '../models/reservation-list.model';
import { ReservationService } from '../services/reservation.service';

@Component({
  selector: 'app-mattabledata',
  templateUrl: './mattabledata.component.html',
  styleUrls: ['./mattabledata.component.css']
})
export class MattabledataComponent implements OnInit {

  displayedColumns: string[] = ['roomName', 'name', 'progress', 'color'];
  dataSource: MatTableDataSource<ReservationList>;

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: true}) sort: MatSort;

  constructor(private serv: ReservationService) {


  }

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    this.dataSource = new MatTableDataSource(this.serv.refreshList());
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
}

这是我的app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatInputModule, MatNativeDateModule } from '@angular/material';
import { SearchComponent } from './search/search.component';
import { ListComponent } from './list/list.component'
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatSelectModule} from '@angular/material/select';
import {MatTableModule} from '@angular/material/table';
import {MatButtonModule} from '@angular/material/button';
import {MatCardModule} from '@angular/material/card';
import { HttpClientModule } from '@angular/common/http';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MattabledataComponent } from './mattabledata/mattabledata.component';

@NgModule({
  declarations: [
    AppComponent,
    SearchComponent,
    ListComponent,
    MattabledataComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatSelectModule,
    MatTableModule,
    MatButtonModule,
    MatCardModule,
    HttpClientModule,
    MatPaginatorModule,
    MatSortModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的预订模式：

    export class ReservationList {
    hotelId: number
    currency: string
    roomName: string 
    roomId: number 
    boardName: string
    checkInDate: Date
    duration: number
    numberOfAd:  number 
    numberOfChd:  number 
    minAdtAge:  number 
    ch1AgeMin:  number 
    ch1AgeMax:  number 
    ch2AgeMin:  number 
    ch2AgeMax:  number 
    ch3AgeMin:  number 
    ch3AgeMax:  number 
    price:  number
    PayDate: string
}

请指导我如何解决此问题并将我的数据放到表中

---

谢谢

问题在于，在异步订阅调用中无法返回值。它只返回您可以取消订阅的订阅

做一些事情，比如：

 this.dataSource = new MatTableDataSource([]);

this.serv.refreshList().subscribe(result => {
  this.dataSource.data = [...result]
}) 

服务功能

refreshList(){
    return this._http.get<ReservationList[]>("https://localhost:44389/api/reservations");
 }

refreshList（）{
返回此。\u http.get（“https://localhost:44389/api/reservations");
}

服务文件中的内容错误。请尝试以下代码：

import { Injectable } from '@angular/core';
import {ReservationList} from '../models/reservation-list.model';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

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

  reservationlist: ReservationList[];

  constructor(private _http: HttpClient) { }

  refreshList(){
    return this._http.get("https://localhost:44389/api/reservations")
 }
}

在组件文件中执行以下操作：

 import { Component, OnInit, ViewChild } from '@angular/core';
    import {MatPaginator} from '@angular/material/paginator';
    import {MatSort} from '@angular/material/sort';
    import {MatTableDataSource} from '@angular/material/table';
    import { ReservationList } from '../models/reservation-list.model';
    import { ReservationService } from '../services/reservation.service';

    @Component({
      selector: 'app-mattabledata',
      templateUrl: './mattabledata.component.html',
      styleUrls: ['./mattabledata.component.css']
    })
    export class MattabledataComponent implements OnInit {

      displayedColumns: string[] = ['roomName', 'name', 'progress', 'color'];
      dataSource: MatTableDataSource<ReservationList>;

      @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
      @ViewChild(MatSort, {static: true}) sort: MatSort;
apiResponse: ReservationList[] = [];


      constructor(private serv: ReservationService) {


      }

      ngOnInit() {
this.serv.refreshList.subscribe((res: any) => this.apiResponse = res as ReservationList[]);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.dataSource = new MatTableDataSource(this.apiResponse);
      }

      applyFilter(filterValue: string) {
        this.dataSource.filter = filterValue.trim().toLowerCase();

        if (this.dataSource.paginator) {
          this.dataSource.paginator.firstPage();
        }
      }
    }

从'@angular/core'导入{Component，OnInit，ViewChild}；
从'@angular/material/paginator'导入{MatPaginator}；
从'@angular/material/sort'导入{MatSort}；
从“@angular/material/table”导入{MatTableDataSource}；
从“../models/ReservationList.model”导入{ReservationList}；
从“../services/reservation.service”导入{ReservationService}；
@组成部分({
选择器：“应用程序mattabledata”，
templateUrl:'./mattabledata.component.html'，
样式URL:['./mattabledata.component.css']
})
导出类MattabledataComponent实现OnInit{
displayedColumns:string[]=['roomName'，'name'，'progress'，'color']；
数据源：MatTableDataSource；
@ViewChild（MatPaginator，{static:true}）paginator:MatPaginator；
@ViewChild（MatSort，{static:true}）sort:MatSort；
apiResponse:ReservationList[]=[]；
构造函数（专用服务：ReservationService）{
}
恩戈尼尼特（）{
this.serv.refreshList.subscribe（（res:any）=>this.apiResponse=resas-ReservationList[]）；
this.dataSource.paginator=this.paginator；
this.dataSource.sort=this.sort；
this.dataSource=新MatTableDataSource（this.apiResponse）；
}
applyFilter（filterValue:string）{
this.dataSource.filter=filterValue.trim（）.toLowerCase（）；
if（this.dataSource.paginator）{
this.dataSource.paginator.firstPage（）；
}
}
}

---

其他一切都必须保持不变。

我在这一行得到了这个错误，顺便说一句：this.dataSource=new MatTableDataSource（this.serv.refreshList（））；

 import { Component, OnInit, ViewChild } from '@angular/core';
    import {MatPaginator} from '@angular/material/paginator';
    import {MatSort} from '@angular/material/sort';
    import {MatTableDataSource} from '@angular/material/table';
    import { ReservationList } from '../models/reservation-list.model';
    import { ReservationService } from '../services/reservation.service';

    @Component({
      selector: 'app-mattabledata',
      templateUrl: './mattabledata.component.html',
      styleUrls: ['./mattabledata.component.css']
    })
    export class MattabledataComponent implements OnInit {

      displayedColumns: string[] = ['roomName', 'name', 'progress', 'color'];
      dataSource: MatTableDataSource<ReservationList>;

      @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
      @ViewChild(MatSort, {static: true}) sort: MatSort;
apiResponse: ReservationList[] = [];


      constructor(private serv: ReservationService) {


      }

      ngOnInit() {
this.serv.refreshList.subscribe((res: any) => this.apiResponse = res as ReservationList[]);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.dataSource = new MatTableDataSource(this.apiResponse);
      }

      applyFilter(filterValue: string) {
        this.dataSource.filter = filterValue.trim().toLowerCase();

        if (this.dataSource.paginator) {
          this.dataSource.paginator.firstPage();
        }
      }
    }