0

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?)

Satyadev
  • 53
  • 4
  • 1
    `[value]="blueprints | async"` – skink Oct 05 '22 at 07:35
  • @skink, Thanks for the advise) But error in not solved. `declare (property) DataView.value: any[] Type '{ __typename?: "Blueprint" | undefined; id: string; ID?: number | null | undefined; title: string; brand: string; model?: string | null | undefined; description: string; }[] | null' is not assignable to type 'any[]'. Type 'null' is not assignable to type 'any[]'.ngtsc(2322) blueprints-list.component.ts(15, 18): Error occurs in the template of component BlueprintsListComponent.` – Satyadev Oct 05 '22 at 10:19
  • The error message is quite specific? You could, for example, do a null check in order to guard against this. – skink Oct 05 '22 at 10:29
  • @skink Could you expand on your answer in more detail. I am a beginner and just learning development, so I will be glad if you tell me more specifically, with code, how to do what you advise. Thanks to. – Satyadev Oct 05 '22 at 12:04

0 Answers0