Angular *ng只显示1部分数据

Question

我在控制台中有一些看起来像这样的数据：

控制台截图如下：

在app.component.html

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

当它应该给我 615 时，这给了我 1 个结果（参见数据上 console.log 的屏幕截图）

这是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);

    }
  } );
}

我怎样才能让它循环显示所有这些而不是只显示 1 个？

Answer 1

也许试试这个：

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

或者试试这个：

this.queryResult = result;

（无括号）

Answer 2

使用trackby。这个解决方案对我有帮助。

在app.component.html

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

在 .ts 中：

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

Angular *ng只显示1部分数据

Angular *ngFor only showing 1 part of the data

typescript

angular

angular9