Ответ API (получить) (JSON) не отображается в ngFor - Angular

Я пытаюсь получить ответ в JSON моего API и отобразить значения на моей странице Угловой, используя нгфор

У меня нет ошибок сборки, значения просто не отображаются на странице, только в консоли, используя console.info(), поэтому я не могу понять.

Это мой компонент.ts:

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

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

export class VpsComponent implements OnInit {
  vpsOptions: any;
  baseUrl: string = "http://127.0.0.1:8000/"
  valor: number = 555;
  tipo: any = "mês";

ngOnInit(): void {
   this.getVps()
   console.info("ngOnInit")
   console.info(this.vpsOptions)
}

constructor(private httpClient: HttpClient) {
    this.vpsOptions = []
}
public getVps() {
 this.httpClient.get(this.baseUrl+'vps').subscribe((result:any) =>{
  for(let item in result){
   this.vpsOptions.push(result[item]);
  }
});

Это мой компонент.html:

<ng-container *ngFor = "let vps of vpsOptions">
      <div class = "swiper-slide">
        <div class = "mini-card">
          <div class = "card-header img-fluid border-0">
            <h3 class = "card-title titulo-mini-card">{{vps.nome}}</h3>
          </div>
          <div class = "card mb-xl-8">
            <div class = "card-body body-vps pt-0">
              <p class = "texto-vps">
                <span class = "primeira-linha"> R$ <span class = "valor-vps">{{valor}},00</span>/{{tipo}}</span> <br>
                <span class = "descritivo-valor">**Preço na contratação de 48 meses </span><br>
                {{vps.processador}} <br>
                {{vps.memoria}} <br>
                {{vps.disco1}} de Armazenamento <br>
                {{vps.banda}} de Banda <br>
                {{vps.ips}} IP(s) dedicado(s) <br>
                100% Acesso Root <br>
                100Mb/s Rede <br>
                Suporte 8/5 <br> <br>
                <button type = "submit" class = "btn btn-primary" style = "background-color: #213B89;"
                >Solicitar Orçamento</button>
                <!-- <a class = "link-vps" href = "">Veja todas as caracterísicas</a> -->
              </p>
            </div>
          </div>
        </div>
      </div>
</ng-container>

Это мой ответный API (я использую fastAPI Python):

Ответ API (получить) (JSON) не отображается в ngFor - Angular

Это ответ в консоли браузера: Ответ API (получить) (JSON) не отображается в ngFor - Angular

python json angular fastapi angular-httpclient

16.05.2022 17:47

Почему в Python есть оператор "pass"?

Оператор pass в Python - это простая концепция, которую могут быстро освоить даже новички без опыта программирования.

Некоторые методы, о которых вы не знали, что они существуют в Python

Python - самый известный и самый простой в изучении язык в наши дни. Имея широкий спектр применения в области машинного обучения, Data Science,...

Основы Python Часть I

Вы когда-нибудь задумывались, почему в программах на Python вы видите приведенный ниже код?

LeetCode - 1579. Удаление максимального числа ребер для сохранения полной проходимости графа

Алиса и Боб имеют неориентированный граф из n узлов и трех типов ребер:

Оптимизация кода с помощью тернарного оператора Python

И последнее, что мы хотели бы показать вам, прежде чем двигаться дальше, это

Советы по эффективной веб-разработке с помощью Python

Как веб-разработчик, Python может стать мощным инструментом для создания эффективных и масштабируемых веб-приложений.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

ваш vpsOptions должен быть наблюдаемым

в вашем ts вы должны сделать:

vpsOptions$: new Observable<any>;

 ...

ngOnInit(): void {
   this.vpsOptions$ = this.getVps()
   ...
}

или более чистый способ:

vpsOptions$ = this.getVps();

...

а затем в вашем шаблоне вы можете сделать:

<ng-container *ngFor = "let vps of (vpsOptions$ | async)">
    ...your content
</ng-container>

Это.

удачи и наслаждайтесь угловым!

16.05.2022 19:25

Я реорганизовал свой код и создал другие классы, чтобы абстрагировать некоторые функции, чтобы было больше практики.

Я создал interface.ts, чтобы отформатировать мой get:

export interface Vps{
  id?: number;
  nome?:string;
  ...

Я создал service.ts, чтобы абстрагировать функцию httpClient.get():

import { Vps } from './vps.interface';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })

export class VpsService {
  private readonly baseUrl: string = "http://127.0.0.1:8000/"
  constructor(private httpClient: HttpClient) {}

  getVps(): Observable<Vps[]> {
    const url = this.baseUrl+'vps';
    return this.httpClient.get<Vps[]>(url);
  }
}

Спасибо @Dario за ответ, я использовал Observable<Vps[]>: //объявление объекта

vpsOptions: Observable<Vps[]>;

//Инициализация объекта, вызывающего service.ts

constructor(private vpsService: VpsService) {
    this.vpsOptions = this.vpsService.getVps();
  }

// Наконец, я изменил component.html, чтобы правильно получить объект (Observable)

<ng-container *ngIf = "vpsOptions | async as options">
    <ng-container *ngFor = "let option of options">
         <!-- my display logic here -->
     </ng-container>
</ng-container>

Рад помочь, молодцы!!

— 17.05.2022 09:53

16.05.2022 20:47