0

Quero receber dados da minha API e construir cards com eles dinamicamente, para isso estou usando o 'binding' do Angular, porem meu HTML está sendo construído antes da resposta estar concluída, com isso ela é vista como undefined. Já tentei usar promises, mas sem sucesso, também tentei usar ngIf para que só gerasse os cards quando minha variável tivesse valor, outra vez sem sucesso.

Service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IDisciplina } from 'src/app/shared/models/IDisciplina';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DisciplinaService {

  private UrlBase = 'http://localhost:5000/api/disciplina';

  constructor(private http: HttpClient) { }

  getDisciplinaById(Id: number): Observable<IDisciplina[]>  {
    return this.http.get<IDisciplina[]>(`${this.UrlBase}/${Id}`);
  }

  getDisciplinaByTurma(TurmaId: number): Observable<IDisciplina[]>  {
    return this.http.get<IDisciplina[]>(`${this.UrlBase}/getByTurma/${TurmaId}`);
  }

}

component.ts

import { Component, OnInit } from '@angular/core';
import { DisciplinaService } from 'src/app/core/services/Disciplina/Disciplina.service';
import { IDisciplina } from 'src/app/shared/models/IDisciplina';

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

  DisciplinaPorTurma: IDisciplina[];

  constructor(private disciplinaService: DisciplinaService) {}

  ngOnInit() {
    this.ReceberDisciplinas();
    console.log(this.DisciplinaPorTurma);
  }

  ReceberDisciplinas() {
    this.disciplinaService.getDisciplinaByTurma(2).subscribe(
      (Disciplina: IDisciplina[]) => this.DisciplinaPorTurma = Disciplina,
      error => console.log('Falha na chamada. Erro: ' + error),
      () => console.log('Chamada a API finalizada!'));
  }

}

HTML

<app-toolbar Titulo="UnipClassroom" LadoDireito="Henrique de Castro"></app-toolbar>
<div *ngIf="DisciplinaPorTurma">
  <app-spinner></app-spinner>
</div>
<div *ngIf="!DisciplinaPorTurma">
  <div class="container" *ngFor="let Disciplina of DisciplinaPorTurma">
    <div class="row">
      <div class="col-sm-6 col-md-4 col-lg-3">
        <mat-card class="tamanho-card margin-card mb-4">
          <mat-card-header>
            <mat-card-title>{{Disciplina.Nome}}</mat-card-title>
            <mat-card-subtitle>{{Disciplina.CursoId}}</mat-card-subtitle>
          </mat-card-header>
        </mat-card>
      </div>
    </div>
  </div>
</div>
2
  • Ao invés de dar um subscribe no serviço em HomeComponent.ts, atribui a variável DisciplinaPorTurma: como sendo do tipo Observable<IDisciplina[]> e no loop do Html deixa com um pipe async assim *ngFor="let Disciplina of DisciplinaPorTurma | async"
    – LeAndrade
    26/03/2020 às 18:49
  • Eu obtive dois erros ao fazer isso. Primeiro no subscribe: "Type 'IDisciplina[]' is missing the following properties from type 'Observable<IDisciplina[]>': _isScalar, source, operator, lift, and 5 more.ts(2740)" A segunda foi com o pipe: " InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'" 26/03/2020 às 19:39

1 Resposta 1

0

você estava na direção certa. O detalhe que o nosso amigo disse de usar o pipe async é válido. A primeiro momento é um pouco confuso mesmo, mas vamos lá. Primeiramente altere o tipo do seu atributo para um observable

DisciplinaPorTurma$: Observable<IDisciplina[]>;

Após isso altere o seu método de consulta para:

ReceberDisciplinas() {
   this.DisciplinaPorTurma$ = this.disciplinaService.getDisciplinaByTurma(2);
}

Inclusive essa abordagem é uma boa prática para evitar possíveis vazamentos de memória (memory leak). Feita essas alterações no seu arquivo ts, agora é só adicionar o pipe async no seu template.

<div class="container" *ngFor="let Disciplina of DisciplinaPorTurma$ | async">
   <!-- Conteúdo aqui -->
</div>

Para facilitar o entendimento, montei um exemplo no stackblitz

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .