Hi) I'm trying to request data from a server using Apollo-Angular with codegen and display that data in a DataView table from PrimeNg.
Type mismatch error. Somewhere, the any type is probably expected, but where?
Should I use the interface as stated in the PrimeNg documentation. If yes, how can I do it, please tell me?
blueprints-list.component
import { Component, OnInit } from '@angular/core';
import { QueryRef } from 'apollo-angular';
import { BlueprintsGQL, BlueprintsQuery } from 'from-ui-to-api';
import { PrimeNGConfig, SelectItem } from 'primeng/api';
import { map, Observable } from 'rxjs';
import { BlueprintService } from './services/blueprint.service';
@Component({
selector: 'printi-price-blueprints-list',
templateUrl: './blueprints-list.component.html',
styleUrls: ['./blueprints-list.component.scss'],
})
export class BlueprintsListComponent implements OnInit {
blueprints$!: Observable<BlueprintsQuery['Blueprints']>;
queryRef!: QueryRef<BlueprintsQuery>;
sortOptions!: SelectItem;
sortOrder!: number;
sortField!: string;
constructor(
private blueprintService: BlueprintService,
private primengConfig: PrimeNGConfig,
private getBlueprintsGQL: BlueprintsGQL
) {}
ngOnInit(): void {
this.blueprints = this.getBlueprintsGQL.watch().valueChanges.pipe(
map(result => result.data.Blueprints)
);
}
}
blueprints-list.component.html
<div class="card">
<p-dataView
#dv
[value]="blueprints"
[paginator]="true"
[rows]="9"
filterBy="name"
[sortField]="sortField"
[sortOrder]="sortOrder"
layout="grid"
>
From [DataView PrimeNG docs.][1]
What i gets:
Error: libs/catalog/blueprints/ui/src/lib/blueprints-list/blueprints-list.component.html:4:6 - error TS2740: Type 'Observable<{ __typename?: "Blueprint" | undefined; id: string; ID?: number | null | undefined; title: string; brand: string; model?: string | null | undefined; description: string; }[]>' is missing the following properties from type 'any[]': length, pop, push, concat, and 28 more.
4 [value]="blueprints"
~~~~~
libs/blueprints-list/blueprints-list.component.ts:10:16
10 templateUrl: './blueprints-list.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component BlueprintsListComponent.
[1]: https://www.primefaces.org/primeng/dataview
Please tell me how to fix this issue? And how can you solve it?)