Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Erro tipar promocoes

Referente ao curso Angular: componentização, formulários e interação com APIs, no capítulo Serviços e injeção de dependencia e atividade Desafio: ajustes de layout e novos serviços

por FRANCISCO JUSCELINO FERREIRA MOURA FILHO
| 49.8k xp | 4 posts
GERENTE 
import { Component, OnInit } from '@angular/core';
import { Promocao } from '../../core/types/types';
import { PromocaoService } from '../../core/services/promocao.service';

@Component({
  selector: 'app-promocoes',
  standalone: false,
  templateUrl: './promocoes.component.html',
  styleUrl: './promocoes.component.css',
})
export class PromocoesComponent implements OnInit {
  promocoes!: Promocao[];
  constructor(private service: PromocaoService) {}

  ngOnInit(): void {
    this.service.listar().subscribe((res) => {
      this.promocoes = res;
    });
  }
}

TYPES

export interface Promocao {
  id: number;
  destino: string;
  imagem: string;
  preco: number;
}

ERRO AO COMPILAR: Application bundle generation failed. [0.240 seconds]

X [ERROR] TS2740: Type 'Promocao' is missing the following properties from type 'Promocao[]': length, pop, push, concat, and 29 more. [plugin angular-compiler]

src/app/pages/promocoes/promocoes.component.ts:17:6:
  17 │       this.promocoes = res;
     ╵       ~~~~~~~~~~~~~~
2 respostas
solução!
por Vinicios Neves
| 1015.4k xp | 1131 posts
Instrutor Tech Lead | Tech Educator

Salve, Francisco!

Consegue mostrar como tá o PromocaoService? Pela mensagem de erro, parece que a tipagem do método do serviço tá como Promocao ao invés de Promocao[], mas por enquanto é só um palpite :)

por FRANCISCO JUSCELINO FERREIRA MOURA FILHO
| 49.8k xp | 4 posts
GERENTE

Acho que foi isso mesmo Vinicius:

import { environment } from './../../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Promocao } from '../types/types';

@Injectable({
  providedIn: 'root',
})
export class PromocaoService {
  private apiUrl: string = environment.apiUrl;

  constructor(private httpClient: HttpClient) {}

  listar(): Observable<Promocao> {
    return this.httpClient.get<Promocao>(`${this.apiUrl}/promocoes`);
  }
}