angular - 传递给方法变量的角度结果

Question

我有一种方法可以进行查询并获取一些数据。

我知道数据在那里，因为 console.log 正在显示它，但它没有传递给我创建的变量，所以我将它添加到组件的 .html 中的 *ngFor 循环中。

这是代码：

...

export class MainComponent {

  queryResult; // results wanted here

  constructor(private myService: MyService) {

    this.testQuery(); // run the method
  }


testQuery() {

    const qry = 'SELECT * FROM mytable';
    this.myService.db.query( qry, ( err, result ) => {
      if ( err ) {
        console.log('err', err);
      } else {
        console.log('result', result); // shows the data
        this.queryResult = result; // result is NOT passed to this.queryResult
      }
    } );
}

如何将结果数据传递给 this.queryResult？

更新：

我检查了 this.queryResult 那里实际上有数据。

它看起来像这样：

console.log(this.queryResult);

它正在返回：

那么它与 *ngFor 有关吗？

这是那部分：

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

标签： angulartypescriptangular9

Answer 1

因为您没有为您的 queryResult 指定类型，所以您不能使用 ngFor。尝试这个：

loadingData = true;
queryResult: any[] = [];

testQuery() {
    const qry = 'SELECT * FROM mytable';
    this.myService.db.query(qry, (err, (result: any[])) => {
      if ( err ) {
        console.log('err', err);
      } else {
        this.queryResult = JSON.parse(JSON.stringify(result)); // but I think your result is already converted
        this.loadingData = false;
      }
    } );
}

然后，您需要在模板中使用 ngIf。为什么？因为必须在加载数据时构建您的 html 内容。

<div *ngIf="!loadingData">
   <div *ngFor=.....>
   </div>
</div>