[Dúvida] Apresentação de dados na tela

Olá Renato, tudo bom?

Para capturar a data e hora que o item é adicionado, eu crio o seguinte método dentro do Service:

criarItem(nomeDoItem: string){
    const id = this.listaDeCompra.length + 1
    const item : Item = {
      id: id,
      nome: nomeDoItem,
      data: new Date().toLocaleString('pt-BR'),
      comprado: false
    }
    return item
  }

Dessa forma eu consigo ter esses dados de acordo com o formato brasileiro. Ah, importante saber que a informação de data mockada está com um formato diferente de escrita pois foram escritas na mão, já com o método .toLocaleString('pt-BR') é escrito de forma crua, a data e hora sem o o dia da semana.

Visualiza o fluxo de criação dos itens, passando pela chamada do método de criação que chama o método dentro do Service (o método criarItem citado acima),

Input.component.ts

adicionarItem(){
    this.listaService.adicionarItemNaLista(this.valorItem);
    this.limparCampo();
}

já dentro do service, verifica se este novo item foi adicionado no Array presente no Service. lista-de-compra.service.ts

adicionarItemNaLista(nomeDoItem: string){
    const item = this.criarItem(nomeDoItem)
    this.listaDeCompra.push(item);
    // this.atualizarLocalStorage();
}

Em seguida verifca se no constructor é feito um get dos itens do LocalStorage.

 constructor() {
    this.listaDeCompra = JSON.parse(localStorage.getItem('itens')|| '[]');
  }

E por fiz se quando os itens são editados, excluidos ou quando acontece alguma alteração no app.component.ts, ele chama o ngDoCheck que chama o método que atualiza as informaçõs dentro do LocalStorage: lista-de-compra.service.ts

  atualizarLocalStorage(){
    localStorage.setItem('itens', JSON.stringify(this.listaDeCompra));
  }

app.component.ts

  ngDoCheck(){
    this.listaService.atualizarLocalStorage();
  }

Espero ter ajudado, abraço.

Fala Diego, beleza irmão ! Cara a sua explicação foi perfeita, mas, ainda, não tirou a minha dúvida. Eu conferi no meu projeto com todos os códigos que você colocou aqui e está tudo batendo certinho, mas quando vou incluir um novo produto, só vem a data e a hora não é carregada. Vou colocar uma imagem para ficar mais claro !

(

Então Renato, você poderia compartilhar seu projeto comigo para que eu possa entender melhor o que está rolando?

Fico no aguardo. Abraço.

Claro meu amigo ! Segue i meu repositório do git.

https://github.com/RenatoAreas/listaDeCompra

Fala Renato, achei.

O seu código estava solicitando somente a Data:

  criarItem(nomeDoItem: string) {
    const id = this.listaDeCompra.length + 1;
    const item: Item = {
      id: id,
      nome: nomeDoItem,
      data: new Date().toLocaleDateString('pt-BR'),
      comprado: false
    };
    console.log(item);

    return item;
  }

Perceba que o método ..toLocateDateString('pt-BR'), o Date, isso faz com que o metódo retorne somente a Data, para resolver isso troque-o para data: new Date().toLocaleString('pt-BR'),.

Fiz um teste aqui e deu certo. Testa ai também.

Abraço e bons estudos. Qualquer coisa estou a disposição.

Valeu Diego, ficou muito mais claro agora. Fiz o teste aqui e funcionou também !