javascript - 方法调用不向数组返回值

Question

我有这样的问题。

我正在使用 Http 返回数据。用浏览器检查一切正常，但我无法在前面显示它。我有一个奇怪的问题，即使在调试时我也无法处理。

我有一个 clientList 数组，理论上它应该接收数据（订阅）。

调用 API 时，我得到未定义。我为 HTTP 查询分配了一个按钮。

我对按钮的原始查询如下所示：

此处为 HMTL：

<button (click)= "getClients()" ></button>

我的组件与方法：

import { Component, OnInit } from '@angular/core';
import {MapsAPILoader} from '@agm/core';
import { ClientService } from '../Services/ClientService';
import { Client } from '../Models/Client';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  clientList: Array<Client>;

  constructor(private client: ClientService){}

  ngOnInit(): void {
    // this.getClients();
  }

  // tslint:disable-next-line: typedef
  getClients(){
    this.client.getClients().subscribe(clients => this.clientList = clients);
    this.loopByArray();
  }

     loopByArray(){
      for (let index = 0; index < this.clientList.length; ++index) {
        let value = this.clientList[index];
        console.log(index, value);
      }
    }
}

如果我像写的那样调用按钮，我会不确定。但是，如果我在调试时只更改一个字符，即我再添加一个等号：

Old :
this.client.getClients().subscribe(clients => this.clientList = clients);

New :
this.client.getClients().subscribe(clients => this.clientList == clients);

我会再玩一次（我会按下按钮），我通常会毫无问题地获得客户：

不幸的是，我再次添加了完全相同的错误和未定义（即使我玩了几次）。我不明白发生了什么事。你必须在一开始就生成数组吗？因为我真的不明白了。

标签： javascriptangulartypescript

Answer 1

修改您的 getClients 函数，如下所示。并了解 async/await 的工作原理

 getClients(){
    this.client.getClients().subscribe(clients => {
         this.clientList = clients;
         this.loopByArray();
    });
  }