Looking to implement pagination on an Angular Material table, but facing a challenge with the data response coming from a GraphQL backend. The structure of the data is as follows:
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { Apollo, gql } from 'apollo-angular';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
interface Imp_Type {
uuid: string;
imp_type_name: string;
imp_sub_group: string;
}
interface Response {
imp_type: Imp_Type[]
}
const GET_IMP_TYPE = gql`
query Imp_Type {
imp_type (limit: 10){
uuid
imp_type_name
imp_sub_group {
imp_group_id
sub_grou_name
}
}
}
`;
@Component({
selector: 'app-imp-type',
templateUrl: './imp-type.component.html',
styleUrls: ['./imp-type.component.scss']
})
export class ImpTypeComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
//imp_type$: Observable<Imp_Type[]>;
query_data = this.apollo.watchQuery<Response>({
query:GET_IMP_TYPE
}).valueChanges.pipe(map(result => result.data.imp_type));
constructor(private apollo: Apollo) { }
displayedColumns: string[] = ['uuid', 'imp_type_name', 'sub_grou_name'];
dataSource = new MatTableDataSource(this.query_data);
ngOnInit(): void {
}
}
Facing an error when attempting to use "query_data" with MatTableDataSource, resulting in the following message:
Argument of type 'Observable<Imp_Type[]>' is not assignable to parameter of type 'unknown[]'. Type 'Observable<Imp_Type[]>' is missing the following properties from type 'unknown[]': length, pop, push, concat, and 25 more.ts(2345)
In need of guidance on solving this issue.