Angular *ngFor only showing 1 part of the data

Question

I have some data that looks like this in the console:

Here is a screenshot of the console:

In app.component.html

<div *ngFor="let data of queryResult">
      {{data.City}}
</div>

This gives me 1 result when it should give my 615 (See the screenshot of a console.log on the data)

Here is the code in app.component.ts:

async testQuery() {
  const qry = 'SELECT * FROM myTable';
  await this.mysqlService.db.query(qry, (err , result) => {
    if ( err ) {
      console.log('err', err);
    } else {
      this.queryResult = [result];
      console.log(this.queryResult);

    }
  } );
}

How can I make it loop so it show's all of them instead of just 1?

Could you produce a minimal working example (eg. using Stackblitz)? — ruth, Jun 15 '20 at 20:56
It seems to me that `queryResult` has a nested array that includes 615 elements. You're trying to iterate through an array with 1 element. — YuliiaZ, Jun 15 '20 at 20:56
How do I do that? I've added the app.component.ts code to the question — joe2020wow, Jun 15 '20 at 20:59
No, it's data.City (uppercase C) ... It show's the result but only 1 — joe2020wow, Jun 15 '20 at 21:01

score 2 · Accepted Answer · answered Jun 15 '20 at 21:02

2

maybe try this:

<div *ngFor="let record of queryResult">
  <div *ngFor="let data of record">
    {{data.City}}
  </div>
</div>

or try this:

this.queryResult = result;

(no brackets)

answered Jun 15 '20 at 21:02

Rick

1,710
8
17

score 1 · Answer 2 · answered Jun 15 '20 at 21:14

1

Use trackby. This solution helped me.

In app.component.html

<div *ngFor="let data of queryResult; trackBy:trackByEmpCode">
      {{data.City}}
</div>

In .ts:

trackByEmpCode(index: number, employee: any): string {
    return employee.City
}

answered Jun 15 '20 at 21:14

Sahil Ralkar

2,331
23
25

Angular *ngFor only showing 1 part of the data

2 Answers2