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>
HomeComponent.ts
, atribui a variável DisciplinaPorTurma: como sendo do tipoObservable<IDisciplina[]>
e no loop doHtml
deixa com um pipe async assim*ngFor="let Disciplina of DisciplinaPorTurma | async"