如何从Angular中的HttpClient生成的get请求中返回数据对象？

Question

恩：这个问题有两种语言。

Pt：Estaquestãoestáemdois idiomas。

英文问题

我正在尝试使用HttpClient从我的API获得响应。每当我尝试在我的组件中设置this.items = data时，没有数据传输到items变量，并且在范围上未定义。

这是我的服务类：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PacoteAPI } from './classes/pacoteAPI';
import { Observable } from 'rxjs';

@Injectable(/*{ providedIn: 'root' }*/)

export class ApiService {

  constructor(private http: HttpClient) {}

  getDataApi() {
    return this.http.get('http://127.0.0.1:3001/query');
  }
}

这是我使用该服务的组件：

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'app-listar',
  templateUrl: './listar.component.html',
  styleUrls: ['./listar.component.css']
})

export class ListarComponent implements OnInit {
  public items: Object;


  constructor(private api: ApiService) {}

  ngOnInit() {
    this.api.getDataApi().subscribe(data => {
      console.log(data.length);
      this.items = data;
    });
    console.log(this.items.length);
  }

}

我在控制台上打印两个长度进行比较，第一个打印显示2 第二次展示会显示undefined。

如何在.subscribe内获取数据？我真的需要这些数据。

葡萄牙语问题

Estou tentando obter uma resposta da minha API usando o HttpClient。 Semper que tento definir this.items = data no meu componente，nenhumdadoétransferidoparaavariávelitems e ela fica indefinida no escopo。

Essaéaminha classedeserviço：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PacoteAPI } from './classes/pacoteAPI';
import { Observable } from 'rxjs';

@Injectable(/*{ providedIn: 'root' }*/)

export class ApiService {

  constructor(private http: HttpClient) {}

  getDataApi() {
    return this.http.get('http://127.0.0.1:3001/query');
  }
}

Esteéomeu componente que consomeoserviço：

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'app-listar',
  templateUrl: './listar.component.html',
  styleUrls: ['./listar.component.css']
})

export class ListarComponent implements OnInit {
  public items: Object;


  constructor(private api: ApiService) {}

  ngOnInit() {
    this.api.getDataApi().subscribe(data => {
      console.log(data.length);
      this.items = data;
    });
    console.log(this.items.length);
  }

}

Eu imprimi os dois的长度没有控制台比较。 O primeiro mostra 2 e o segundo mostra undefined。

Como que faz para pegar o data de dentro do .subscribe？ Eu preciso muito选择了爸爸。

感谢所有
Obrigado por tudo
：）

Answer 1

如果您的目标是使用模板中的项目，您还可以考虑使用异步管道，让Angular为您管理订阅... {{ items | async }}

修改 要在* ngFor循环中使用数据，您需要使用如下的异步管道：

// in the controller:
export class ListarComponent implements OnInit {
  public items: Object;
  items$: Observable<any[]>;


  constructor(private api: ApiService) {}

  ngOnInit() {
    this.items$ = this.api.getDataApi();
  }

}

// In the template
<div *ngFor="let item of items$ | async>
// do something with item
</div>

以下是Stackblitz的一个工作示例：https://stackblitz.com/edit/angular-ovuo1w?file=src%2Fapp%2Fapp.component.ts

Answer 2

你做的是绝对正确的

public items: Object;
constructor(private api: ApiService) {}
ngOnInit() {
  this.api.getDataApi().subscribe(data => {
    console.log(data.length);
    this.items = data;
  });
  console.log(this.items.length);
}

订阅getDataApi后，您尝试将结果存储在组件属性items中。只有这样你就拥有了数据

在您的模板中，您的数据可能无法立即使用，例如

<div *ngIf="items"></div>

所以你可能想要放ngIf，否则items为空时可能会出错。