Question

在Angular 8组件中，我正在运行以下行：

  console.log(this.array);

在浏览器中，在开发人员模式下，我在控制台上看到以下结果：

因此，它显然具有一些内容。以下行在控制台上写为“ 0”：

console.log(this.array.length);

这是堆栈闪电代码：https://stackblitz.com/edit/angular-ivy-g57vnv

在应用程序组件中，array和array.length记录在控制台上。

按以下方式创建数组的内容：在service.service.ts中，将GET身份验证请求提取到Crowdvalley托管的示例后端。由于cv-auth标头不是正确的标头（故意），因此响应为错误。如果响应不包含结果“成功”，则将字符串“ false”推入数组（请参阅ServiceService）。如果在开发人员模式下查看Web应用程序（https://angular-ivy-g57vnv.stackblitz.io），则会看到该数组具有读取的内容，但仍会写成数组的长度为0。

那是为什么？我如何调查真实长度？如何从组件访问其内容？

Answer 1

将isLoggedIn方法更改为：-

async isLoggedIn() {
    const array = [];
    const proxyurl = 'https://cors-anywhere.herokuapp.com/';
    const url = 'https://api.sandbox.crowdvalley.com/v1/nzz/authenticate'; // site that doesn’t send Access-Control-*
    const myHeaders = new Headers();
    myHeaders.append('cv-auth', this.adminHeader);
    myHeaders.append('Cookie', this.cookie);

    // tslint:disable-next-line:prefer-const
    let requestOptions = {
      method: 'GET',
      headers: myHeaders
    };
    await new Promise((resolve,reject) => fetch(proxyurl + url, requestOptions)
      .then(response => response.json())
      .then(result => {
        if (result.outcome === 'success') {
          array.push('true');
          resolve();
        } else {
          array.push('false');
          resolve();
        }
      })
      .catch(error => {
        console.log('error', error);
        resolve();
      }));
    return array;
  }

和ngOnInit组件到：-

ngOnInit(){
      this.service.isLoggedIn().then((array) => {
        this.array = array;
        console.log(this.array);
        console.log(this.array.length);
      })
    }

Answer 2

这是因为ServiceService.isLoggedIn()返回一个数组，进行异步调用，然后对该数组进行突变。这是错误的模式-isLoggedIn()应该返回异步的内容，或者是Promise，或者更好的是（毕竟我们在Angular项目中）可观察的对象。

与往常一样，您可以在此线程中找到各种食谱： How do I return the response from an asynchronous call?

（如果在console.log中得到一个包含一些内容的数组，则仅是由于控制台中对象的惰性评估：仅评估其实际值，然后单击该箭头）。

Answer 3

您正在调用isLoggedIn（）方法，就好像它是同步的，而不是同步的-它执行fetch（），并返回一个Promise。

因此该方法的编写方式将立即返回一个空数组然后在诺言得到解决后，将结果推入数组。

您应该返回一个Promise，并在组件中使用Promise。

此外，我想使用fetch和promises并没有真正的问题，但是Angular的HttpClient和rxjs Observables提供了更高级别的功能，这是Angular中API调用的“通常”方式。

角数组包含元素，但仍返回null的长度

3 个答案: