Error capturing component information in Angular

Asked

Viewed 104 times

0

My friends, I am starting to study angular, I am doing a CRUD of products I came across the following error when creating the component to edit the registered product. I tried a lot of different ways, but nothing worked. The following messages appears:

"error TS2564: Property 'product' has no initializer and is not Definitely Assigned in the constructor. 13 product: Product"

and

"error TS2663: Cannot find name 'product'. Did you Mean the instance Member 'this.product'? 20 this.product = product"

This is my product-update.component.html file and it should show the product that will be edited. 

    <mat-card>
    <mat-card-title>Alterar Produto</mat-card-title>
    <form>
        <mat-form-field>
            <input matInput placeholder="Nome"
                [(ngModel)]="product.name" name="name">
        </mat-form-field>
        <mat-form-field>
            <input matInput placeholder="Preço (R$)"
                [(ngModel)]="product.price" name="price">
        </mat-form-field>
    </form>
    <button mat-raised-button (click)="updateProduct()" color="primary">
        Atualizar
    </button>
    
    <button mat-raised-button (click)="cancel()">
        Cancelar
    </button>
</mat-card>
And this is my product-update.component.ts that should be responsible for bringing the information of the selected product. I haven’t finished all the functions of this file yet. Error messages appear on it. 
    import { ActivatedRoute, Router } from '@angular/router';
import { ProductService } from './../product.service';
import { Component, OnInit } from '@angular/core';
import { Product } from '../product.model';

@Component({
  selector: 'app-product-update',
  templateUrl: './product-update.component.html',
  styleUrls: ['./product-update.component.css']
})
export class ProductUpdateComponent implements OnInit {
  
  product: Product

  constructor(private productService: ProductService, private router: Router, private route: ActivatedRoute) { }

  ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id') || ''
    this.productService.readById(id).subscribe(prduct => {
      this.product = product
      
    });
  }

  updateProduct():void{

  }

  cancel(): void{
    this.router.navigate(['/products'])
  }

}

I need to identify how to fix these two error messages, if any can help, I greatly appreciate.

json angular typescript

  • I think instead of just declaring the product you have to initialize it as an empty product

  • If I do this, it will bring in the empty HTML fields, but I need you to bring the product information related to the ID to edit. or not?

  • vc can do a ngif="product" in html tbm there at the time of the form

  • There is no missing instantiation Product nay??!

  • You should initialize proudct = new Product(); And the moment you do "readById" you wrote 'prduct' instead of 'product'

  • When you create the Product, try to do so: product!: Product . I believe that this should solve.

Show 1 more comment

1 answer

-1

Try this

export class ProductUpdateComponent implements OnInit {

  product!: Product;

  constructor(
    private productService: ProductService,
    private router: Router,
    private route: ActivatedRoute
  ) { }

  ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id')
    this.productService.readById(id).subscribe(product => {
      this.product = product;

    })

  }

No product.service

try this

readById(id: any): Observable<Product>{
    const url= `${this.baseUrl}/${id}`
    return this.http.get<Product>(url)
  }

Browser other questions tagged json angular typescript

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