Добавьте значения в таблицу CRUD, используя angular

Question

Сегодня я создавал CRUD-таблицу и, похоже, получаю много ошибок, поэтому я не могу упомянуть их все в заголовке вопроса. Пожалуйста, извините меня за эту ошибку. Это простая таблица, а не таблица материалов angular, но мне очень сложно отладить ее и получить желаемый результат. Это мои файлы

app. компонент. html

 <div class="container">
<br>
<div class="row mb-3">
  <div class="col-md-3">
    <input type="text" name="" class="form-control" #uname placeholder="user name">
  </div>
  <div class="col-md-3">
    <input type="text" name="" class="form-control" #uage placeholder="age">
  </div>
  <div class="col-md-3">
    <input type="text" name="" class="form-control" #ugender placeholder="gender">
  </div>
  <div class="col-md-3">
    <input type="text" name="" class="form-control" #uaddress placeholder="address">
  </div>
  <div class="col-md-3">
    <button class="btn btn-success" (click)="onCreateUser(uname,uage,ugender,uaddress)">add user</button>
  </div>
</div>


<div class="row">
  <div class="col-md-10">
    <table class="table">

      <thead>
        <tr>
          <th *ngFor = "let tcol of thedrs">
            {{tcol}}
          </th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor = "let trow of trows">
          <td *ngFor = "let tcol of thedrs">
            {{trow[tcol]}}
           </td>
         </tr>

        <tr *ngFor="let user of users">
          <td>
          {{user.name}}
          </td>
          <td>
          {{user.age}}
          </td>
          <td>
          {{user.gender}}
          </td>
          <td>
          {{user.address}}
          </td>
        </tr>

      </tbody>
    </table>
  </div>
  </div>

</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ngForTable';
  users = [];
  
  thedrs = [ 'Name', 'Age', 'Gender', 'Address'];
  trows = [{
    name: 'abc',
    age: 26,
    gender: 'female',
    address: 'usa'
  },
  {
    name: 'def',
    age: 27,
    gender: 'male',
    address: 'denmark'
  },
  {
    name: 'ghi',
    age: 25,
    gender: 'others',
    address: 'finland'
  }
  ];
  onCreateUser(uname,uage,ugender,uaddress){
    this.users.push({
      name: uname.value
      age: uage.value
      gender: ugender.value
      address: uaddress.value
    });
  }
}

Пожалуйста, отладьте код, чтобы я мог получить желаемое вывод таблицы, в которую я могу добавлять значения через поле ввода, которые позже можно просмотреть в таблице. Здесь таблица уже содержит некоторые значения, которые упомянуты в коде. Также я получаю следующее сообщение об ошибке 3 раза, т.е. о возрасте, поле и адресе в app.component.ts
error 1

',' expected. ts[1005]

error 2 В createUser () в app.component.ts я получаю пунктирную линию под uname, uage, ugender, uaddress. исправления , которые показаны:

1)Infer parameter types from usage 
2)Infer all types from usage
3)convert parametrs to destructured object

** error 3 **
Это фотография того, как мой вывод выглядит прямо сейчас. Пожалуйста, отладьте мой код, чтобы отобразить tabl e и значения, которые могут быть добавлены.

вывод в localhost: 4200

Answer 1

Вам нужно добавить запятую для разделения свойств при добавлении объекта пользователя как

 this.users.push({
      name: uname.value,
      age: uage.value,
      gender: ugender.value,
      address: uaddress.value
    });