I'm trying to make the results of the inputs appear on the table, but I can't, I've looked in several places and I don't know what else to do, can you tell me what's wrong?

This error appears in the terminal: terminal

Error: src/app/components/template/form/form.component.html:67:25 - error TS2339: Property 'item' does not exist on type 'FormComponent'.

67 {{item.endereco}} ~~~~

src/app/components/template/form/form.component.ts:7:16 7 templateUrl: './form.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component FormComponent.

Error: src/app/components/template/form/form.component.html:68:25 - error TS2339: Property 'item' does not exist on type 'FormComponent'.

68 {{item.descricao}} ~~~~

src/app/components/template/form/form.component.ts:7:16 7 templateUrl: './form.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component FormComponent.

Angular:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';


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

  formu: FormGroup;
  listData: any;

  constructor(
    private fb: FormBuilder){

      this.listData = [];

      this.formu = this.fb.group({
        codigo: ["", [Validators.required]],
        nome: ["", [Validators.required]],
        nascimento: "",
        endereco: "",
        descricao: ""
      })

  }

  public addItem(): void {
    this.listData.push(this.formu);
  }

  ngOnInit(): void {
  }
    
  }

<form [formGroup]="formu">
    <span>
    <label for="" >Código*:</label>
    <br>
    <input type="text" formControlName="codigo" placeholder="0000">
    <div *ngIf="formu.get('codigo')?.errors?.['required'] && formu.get('codigo')?.touched">
    Código obrigatório 
    </div>
    <br>
    </span>
    <label for="" >Nome*:</label>
    <br>
    <input type="text" placeholder="Nome Completo" formControlName="nome">
    <div *ngIf="formu.get('nome')?.errors?.['required'] && formu.get('nome')?.touched">
        Nome obrigatório
    </div>
    <br>
    <label for="" >Data de Nascimento:</label>
    <br>
    <input type="date" formControlName="nascimento">
    <br>
    <label for="" >Endereço:</label>
    <br>
    <input type="text" formControlName="endereco">
    <br>
    <label for="" >Descrição:</label>
    <br>
    <textarea name="" id="" cols="30" rows="10" formControlName="descricao"></textarea>
    <br>
    <br>
    <button (click)="addItem()" >Salvar</button>
</form>
<div>
    <table >
        <thead>
          <tr>
            <th scope="col"></th>
            <th scope="col">Código</th>
            <th scope="col">Nome</th>
            <th scope="col">Data de Nascimento</th>
            <th scope="col">Endereço</th>
            <th scope="col">Descrição</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>0001</td>
            <td>Andressa Lima</td>
            <td>07/04/2004</td>
            <td>Rua das Palmeiras</td>
            <td>Gosta de ler</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>0002</td>
            <td>Maria Laurentino</td>
            <td>28/03/1969</td>
            <td>Rua JK</td>
            <td>É detalhista</td>
          </tr>
          <tr>
            <th scope="row" *ngFor="let item of listData"></th>
            <td><span>{{item.codigo}}</span></td>
            <td><span>{{item.nome}}</span></td>
            <td><span>{{item.nascimento}}</span></td>
            <td><span>{{item.endereco}}</span></td>
            <td><span>{{item.descricao}}</span></td>
          </tr>
        </tbody>
      </table>    
</div>

CodePudding user response：

You have two problems.

1. Instead of pushing values, you are pushing FormGroup. Change this.listData.push(this.formu); to this.listData.push(this.formu.value);

2. 'item' is not found because it is not in the scope of your ngFor loop. You probably want to achieve something like this:

<tr *ngFor="let item of listData; let i = index">
        <th scope="row">{{ i }}</th>
        <td>
          <span>{{ item.codigo }}</span>
        </td>
        <td>
          <span>{{ item.nome }}</span>
        </td>
        <td>
          <span>{{ item.nascimento }}</span>
        </td>
        <td>
          <span>{{ item.endereco }}</span>
        </td>
        <td>
          <span>{{ item.descricao }}</span>
        </td>
</tr>