Property '' does not exist on type ''

Asked

Viewed 4,663 times

-1

I’m picking up an error while doing the Build of my angular application, the error is this:

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

Here is my TS code and HTML. The call by form works normally. What I think is happening is that when I build the application the object Produto is still vacant then has no property. What can I do in this case? 

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>

angular typescript angular-6 property

  • First that every class you use in another component should instantiate that class, usually in ngOnInit(), however, noting by the code posted I think the problem is that actually in the class Product there is no such property produtos.resource_name is sure that there exists this property, otherwise, if the object problem is empty it would give error in the previous properties like id and type.

  • There is, and he complains about all other properties...

  • So the problem is in class instantiation.

  • I think you want to use an ngFor to iterate each element of the products

1 answer

1

The only problem is resource_name really does not exist in produtos: Produto[].

What you want to do is iterate through the products, so I suggest you do

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

One more thing: looks like we’re missing one } at the end of produtos.owner_ (check if this property is the same) for the interpolation to be correct.

Browser other questions tagged angular typescript angular-6 property

You are not signed in. Login or sign up in order to post.