0

Estou pegando um erro ao fazer o Build da minha aplicação angular, o erro é o seguinte:

Property 'resource_name' does not exist on type 'Produto[]'

Aqui está meu código TS e o HTML. A chamada pelo form funciona normalmente. O que acho que está ocorrendo é que quando buildo a aplicação o objeto Produto ainda está vázio então não tem nenhuma propriedade. O que posso fazer nesse caso?

import { Component, OnInit } from '@angular/core';
import { Produto } from 'src/models/produto.models';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms' 
import { ProdutoService } from '../services/produtos.service';

@Component({
  selector: 'app-consultar-page',
  templateUrl: './consultar-page.component.html',
  styleUrls: ['./consultar-page.component.css']
})
export class ConsultarPageComponent{


  produto = {} as Produto;
  produtos: Produto[];
  constructor(private produtoService: ProdutoService) {}
  teste = true

  ngOnInit() {
  }


  pesquisa(frm){
    const data = this.produto.resource_id
    this.produtoService.getProdutoByResourceID(data).subscribe((produtos: Produto[]) => {
    this.produtos = produtos;
    this.teste = false
    })

}

<div class="uk-flex-center" uk-grid>
    <div class="uk-card-body uk-card-default uk-background-muted uk-card-small ">
        <div class="uk-margin"></div>
        <h3 class="uk-card-title">CONSULTA DE RECURSOS</h3>
        <form method="post" class="uk-form-horizontal uk-margin-large" #frm="ngForm" (ngSubmit)="pesquisa(frm)">
            
            <div class="uk-margin">
                <label class="uk-form-label" for="form-horizontal-text">Resource ID:</label>
                <div class="uk-form-controls">
                    <input class="uk-input" type="text" placeholder="Resource ID" [(ngModel)]="produto.resource_id" name="resource_id" required>
                </div>
            </div>
        
            <div uk-form-horizontal>
                <button  type="submit" class="uk-button uk-button-default uk-text-center">CONSULTAR</button>
            </div>
        </form>
    </div>
</div>

<ng-template [ngIf]="!teste">
    {{ produtos.resource_id }} || {{ produtos.resource_type}} || {{ produtos.resource_name }} || {{ produtos.owner_ }
</ng-template>

4
  • Primeiro que toda classe que utilizar em outro componente deverá instanciar essa classe, geralmente no ngOnInit(), porém, observando pelo código postado acho que o problema é que realmente na classe Produto não existe essa propriedade produtos.resource_name tem certeza que lá existe essa propriedade, pq senão, se fosse problema do objeto estar vazio iria dar erro nas propriedades anteriores como id e type.
    – LeAndrade
    Commented 27/04/2020 às 19:26
  • Existe sim, e o ele reclama de todas outras propriedades... Commented 27/04/2020 às 19:27
  • Então o problema é na instanciação da classe.
    – LeAndrade
    Commented 27/04/2020 às 19:30
  • acho que vc quer usar um ngFor pra iterar cada elemento do produtos Commented 29/04/2020 às 1:36

1 Resposta 1

1

O único problema é que resource_name realmente não existe em produtos: Produto[].

O que você quer fazer é iterar pelos produtos, para isso sugiro que faça

<ng-template [ngIf]="!teste">
    <div *ngFor="let produto of produtos" >{{ produto.resource_id }} || {{ produto.resource_type}} || {{ produto.resource_name }} || {{ produto.owner_ }}</div>
</ng-template>

Mais uma coisa: parece que tá faltando um } no final de produtos.owner_ (verificar se essa propriedade é assim mesmo) para a interpolação ficar correta.

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 .