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>

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>

Angular 方法传递给变量的结果

Angular result for passing to variable on method

typescript

angular

angular9