[英]Argument of type 'Subscription' is not assignable to parameter of type
我正在嘗試將數據從數據庫中提取到我的angular
材料matdatatable
。 但在 ts 中,我收到此錯誤:“訂閱”類型的參數不可分配給ReservationList[]
類型的參數。 類型“訂閱”缺少ReservationList[]
類型中的以下屬性:長度、彈出、推送、連接和另外 26 個。
這是我的數據表組件.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();
}
}
}
這是我的服務:
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").subscribe(res => this.reservationlist = res as ReservationList[]);
}
}
這是我的 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 { }
這是我的預訂 model:
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]
})
服務 function
refreshList(){
return this._http.get<ReservationList[]>("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();
}
}
}
其他一切都必須保持不變。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.