HttpClient e injeção de dependência foi compilado com problemas | Angular parte 1: produtividade e organização com framework SPA

2
respostas

por Matheus Alves de Freitas

| 7.7k xp | 2 posts

UX/UI Designer

Olá boa tarde eu efetuei o import do HttpClient, assim como mostrado no passo a passo da aula, contudo a minha injeção de dependência foi compilada apresentando os seguintes problemas abaixo ainda no console...

ERROR

src/app/app.component.html:4:18 - error TS2339: Property 'url' does not exist on type 'never'.

4     [url]="photo.url"

  src/app/app.component.ts:6:16
    6   templateUrl: './app.component.html',

    Error occurs in the template of component AppComponent.


ERROR

src/app/app.component.html:5:26 - error TS2339: Property 'description' does not exist on type 'never'.

5     [description]="photo.description">

  src/app/app.component.ts:6:16
    6   templateUrl: './app.component.html',

    Error occurs in the template of component AppComponent.

Alguém enfrentou esse mesmo problema?

2 respostas

por Willian Gomes Salomão

| 67.9k xp | 1 posts

19/01/2023

Estou com o mesmo problema.

por DIEGO CARLOS MARTINS GAYOSO

| 117.3k xp | 184 posts

Instrutor

24/01/2023

Olá Matheus, tudo bom?

Segundo o seu erro a propriedade photo não existe. As propriedades de photo.url e photo.description só vão existir se o array de photos tiver sido alimentado pelo método dentro do ngOnInit:

  photos: any[] = []; 

  constructor(private photoService: PhotoService) { }

  ngOnInit(): void {

      this.photoService
        .listFromUser('flavio')
        .subscribe(photos => this.photos = photos);
 }

Assim, quando o *ngFor feito no HTML do AppComponent, cada item dentro do Array photos vai ser atribuido na variável let photo:

<ap-photo 
    *ngFor="let photo of photos" 
    [url]="photo.url" 
    [description]="photo.description">
</ap-photo>

Lembre-se também que o método listFromUser retorna uma requisição get da API que contem a informação das fotos:

const API = 'http://localhost:3000';

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

    constructor(private http: HttpClient) {}

    listFromUser(userName: string) {
        return this.http
            .get<Photo[]>(API + '/flavio/photos');       
    }

Se não tiver nenhum erro no código, compartilha aqui para que eu possa te ajudar melhor.

Abraço.