Bem-vindos à nossa comunidade!

Junte-se a nós e faça parte hoje mesmo!

Property 'product' has no initializer - aconteceu este erro com vcs na aula de angular?

vdavidmarques

Novo Membro
Cadastro
23/6/21
Postagens
5
Curtidas
0
Pontuação
3
Cidade
São Paulo
Estou na aula Componente Obter Produto do curso de Angular aqui da Coder e me deparei com este erro que está aparecendo no console:

Code:
Error: src/app/components/product/product-read/product-read.component.ts:12:3 - error TS2564: Property 'product' has no initializer and is not definitely assigned in the constructor.

12   product: Product[]

Mesmo conferindo o arquivo final e revendo as aulas não consegui identificar o erro, afinal está tudo igual. Vou deixar aqui como estão meus arquivos:

product-read.component.ts
Code:
import { ProductService } from './../product.service';
import { Product } from './../product.model';
import { Component, OnInit } from '@angular/core';

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

  products: Product[]

  constructor(private productService: ProductService) { }

  ngOnInit(): void {
    this.productService.read().subscribe(products => {
      this.products = products
      console.log(products)
    })
  }

}

e o product.model.ts

Code:
export interface Product{
    id? : number
    name: string
    price: number | null
}

por fim o product.service .ts

Code:
import { Product } from './product.model';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {MatSnackBar} from '@angular/material/snack-bar';
import { Observable } from 'rxjs';

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

  baseUrl = "http://localhost:3001/products"

  constructor(private snackBar: MatSnackBar,
    private http: HttpClient) { }

  showMessage(msg: string): void{
    this.snackBar.open(msg, 'x', {
      duration: 3000,
      horizontalPosition: "right",
      verticalPosition: "top"
    })
  }
 
  create(product: Product): Observable<Product>{
    return this.http.post<Product>(this.baseUrl, product)
  }

  read(): Observable<Product[]>{
    return this.http.get<Product[]>(this.baseUrl)
  }
}

Parece que os cursos gratuitos não tem suporte, mas caso alguém queria trocar informações ficaria grato; assim podemos trocar informações e ajudar os demais.
Obrigado
 

Raquel

Membro
Cadastro
24/9/20
Postagens
371
Curtidas
378
Pontuação
150
Fala David, tudo bom?

Parece que o problema maior é nesse
Estou na aula Componente Obter Produto do curso de Angular aqui da Coder e me deparei com este erro que está aparecendo no console:

Code:
Error: src/app/components/product/product-read/product-read.component.ts:12:3 - error TS2564: Property 'product' has no initializer and is not definitely assigned in the constructor.

12   product: Product[]

Mesmo conferindo o arquivo final e revendo as aulas não consegui identificar o erro, afinal está tudo igual. Vou deixar aqui como estão meus arquivos:

product-read.component.ts
Code:
import { ProductService } from './../product.service';
import { Product } from './../product.model';
import { Component, OnInit } from '@angular/core';

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

  products: Product[]

  constructor(private productService: ProductService) { }

  ngOnInit(): void {
    this.productService.read().subscribe(products => {
      this.products = products
      console.log(products)
    })
  }

}

e o product.model.ts

Code:
export interface Product{
    id? : number
    name: string
    price: number | null
}

por fim o product.service .ts

Code:
import { Product } from './product.model';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {MatSnackBar} from '@angular/material/snack-bar';
import { Observable } from 'rxjs';

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

  baseUrl = "http://localhost:3001/products"

  constructor(private snackBar: MatSnackBar,
    private http: HttpClient) { }

  showMessage(msg: string): void{
    this.snackBar.open(msg, 'x', {
      duration: 3000,
      horizontalPosition: "right",
      verticalPosition: "top"
    })
  }

  create(product: Product): Observable<Product>{
    return this.http.post<Product>(this.baseUrl, product)
  }

  read(): Observable<Product[]>{
    return this.http.get<Product[]>(this.baseUrl)
  }
}

Parece que os cursos gratuitos não tem suporte, mas caso alguém queria trocar informações ficaria grato; assim podemos trocar informações e ajudar os demais.
Obrigado
Fala David! Tudo bom?

Parece que o problema maior é nesse product.service.ts, quando comparei estavam faltando umas partes do código que presumi ser porque não tinham sido desenvolvidas ainda.

Porém, você pode comparar seus códigos com os do repositório como instruído nesse artigo aqui e, assim, corrigir os problemas.

Abraços e bons estudos!
 

vdavidmarques

Novo Membro
Cadastro
23/6/21
Postagens
5
Curtidas
0
Pontuação
3
Cidade
São Paulo
Olá, obrigado pela ajuda. Realmente no product.service.ts estão diferentes pq são partes que ainda não foram desenvolvidas e comparando os arquivos, não encontrei divergências.
 

mourabraz

Membro
Moderador
Cadastro
23/12/20
Postagens
135
Curtidas
182
Pontuação
100
Cidade
Leiria
@vdavidmarques Olá boa tarde! Vc já resolveu?

Caso não tenha resolvido eu tenho uma sugestão... Meio que estranha porque o erro diz:

Error: src/app/components/product/product-read/product-read.component.ts:12:3 - error TS2564: Property 'product' has no initializer and is not definitely assigned in the constructor. 12 product: Product[]

Ahhhh agora vi que quando vc escreveu o erro a sua variável tinha o nome "product"! Correto?
E agora é "products"!

Então eu acho que consigo te ajudar.

Você só precisa inicilaizar o array "products", tipo assim:

JavaScript:
import { ProductService } from './../product.service';
import { Product } from './../product.model';
import { Component, OnInit } from '@angular/core';

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

  products: Product[]

  constructor(private productService: ProductService) {
    this.products = [];
  }

  ngOnInit(): void {
    this.productService.read().subscribe(products => {
      this.products = products
      console.log(products)
    })
  }

}

Mais especificamente no construtor:

JavaScript:
  constructor(private productService: ProductService) {
    this.products = [];
  }
}


Acredito que o erro apontado lá em cima já não ocorra!

Abraços!
 

vdavidmarques

Novo Membro
Cadastro
23/6/21
Postagens
5
Curtidas
0
Pontuação
3
Cidade
São Paulo
@vdavidmarques Olá boa tarde! Vc já resolveu?

Caso não tenha resolvido eu tenho uma sugestão... Meio que estranha porque o erro diz:



Ahhhh agora vi que quando vc escreveu o erro a sua variável tinha o nome "product"! Correto?
E agora é "products"!

Então eu acho que consigo te ajudar.

Você só precisa inicilaizar o array "products", tipo assim:

JavaScript:
import { ProductService } from './../product.service';
import { Product } from './../product.model';
import { Component, OnInit } from '@angular/core';

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

  products: Product[]

  constructor(private productService: ProductService) {
    this.products = [];
  }

  ngOnInit(): void {
    this.productService.read().subscribe(products => {
      this.products = products
      console.log(products)
    })
  }

}

Mais especificamente no construtor:

JavaScript:
  constructor(private productService: ProductService) {
    this.products = [];
  }
}


Acredito que o erro apontado lá em cima já não ocorra!

Abraços!
Obrigado pela ajuda. Solucionou
 

SyaoranR

Novo Membro
Cadastro
24/11/21
Postagens
2
Curtidas
0
Pontuação
1
Cidade
Aracaju
Bom dia, essa inicialização não irá deixar como undefined na hora de rodar não, né? Porque estou com esse mesmo problema. Grato desde já.
 

mourabraz

Membro
Moderador
Cadastro
23/12/20
Postagens
135
Curtidas
182
Pontuação
100
Cidade
Leiria
Olá @SyaoranR

Esta inicialização aqui:

JavaScript:
constructor(private productService: ProductService) {
    this.products = [];
  }

Vai inicializar a variável (a propriedade... etc) com o valor que lhe estás a dar, que no caso é um array vazio. Então você está correto quando afirma que não será inicializada com undefined! Mas nada garante que esse valor não esteja sendo alterado depois.
Se puderes coloca aqui o output do erro que recebes no terminal.


Abraços
 
Top