0

Based on this example https://stackblitz.com/angular/lmgdevradbre?file=app%2Ftable-http-example.ts

I'm trying to adapt the code to my api's response. But I'm getting

Type 'any[] | ConLiq' is not assignable to type '{}[]'.
  Type 'ConLiq' is not assignable to type '{}[]'.
    Property 'includes' is missing in type 'ConLiq'.

line: ).subscribe(data => this.dataSource.data = data);

Why is that and what's the property 'includes'? I don't see it in the data source object.

The error is specifically at this.dataSource.data

JSON:

[
    {
      "con": "Sonsectetur sunt",
      "con_id": 360,
    },
    {
      "con": "Oulla dolore",
      "con_id": 933,
    }
]

TS:

export class LiqConComponent implements OnInit {
    displayedColumns = ['con', 'con_id'];
    exampleDatabase: ExampleHttpDao | null;
    dataSource = new MatTableDataSource();
    isLoadingResults = true;

    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;

    constructor(private http: HttpClient) { }

    ngOnInit() {
        this.exampleDatabase = new ExampleHttpDao(this.http);

        // If the user changes the sort order, reset back to the first page.
        this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);

        merge(this.sort.sortChange, this.paginator.page)
            .pipe(
                startWith([]),
                switchMap(() => {
                    this.isLoadingResults = true;
                    return this.exampleDatabase!.getConLiq();
                }),
                map(data => {
                    // Flip flag to show that loading has finished.
                    this.isLoadingResults = false;

                    return data;
                }),
                catchError(() => {
                    this.isLoadingResults = false;
                    return observableOf([]);
                })
            ).subscribe(data => this.dataSource.data = data); // Here I get the error
    }
}

export interface ConLiq {
    con: string;
    con_id: number;
}

export class ExampleHttpDao {
    constructor(private http: HttpClient) { }

    getConLiq(): Observable<ConLiq> {
        const json_con = api + 'conliq';

        return this.http.get<ConLiq>(json_con);
    }
}

getConLiq() returns:

{
  "_isScalar": false,
  "source": {
    "_isScalar": false,
    "source": {
      "_isScalar": false,
      "source": {
        "_isScalar": true,
        "value": {
          "url": "api address",
          "body": null,
          "reportProgress": false,
          "withCredentials": false,
          "responseType": "json",
          "method": "GET",
          "headers": {
            "normalizedNames": {},
            "lazyUpdate": null,
            "headers": {}
          },
          "params": {
            "updates": null,
            "cloneFrom": null,
            "encoder": {},
            "map": null
          },
          "urlWithParams": "api address"
        }
      },
      "operator": {
        "concurrent": 1
      }
    },
    "operator": {}
  },
  "operator": {}
}
4
  • It appears as though the type of data is any[] | ConLiq, and it can't map from an array of objects to ConLiq. An array would have an includes function on it, but ConLiq does not have one. I think you likely want any[] | ConLiq[], but I don't know anything about MatTableDataSource. Commented Aug 7, 2018 at 17:46
  • github.com/angular/material2/blob/master/src/lib/table/… Commented Aug 7, 2018 at 17:46
  • What does getConLiq() return? Maybe ConLiq? Commented Aug 7, 2018 at 17:51
  • It returns an object, content from JSON.stringify added to the OP Commented Aug 7, 2018 at 18:03

1 Answer 1

1

There are multiple problems in your code:

  • The getConLiq() function returns Observable<ConLiq>, but it should be Observable<ConLiq[]>. Same goes for return this.http.get<ConLiq>(json_con);, it should be return this.http.get<ConLiq[]>(json_con);
  • MatTableDataSource is a parametrized type and thus the line dataSource = new MatTableDataSource(); should be dataSource = new MatTableDataSource<ConLiq>();
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.