在 Angular 中添加两个不同的输入以列出的 TypeScript 代码是什么？

Question

我创建了一个表单来将 2 个不同的输入（姓名和年龄）添加到列表中。但是我在打字稿文件中编码时遇到问题。将项目添加到列表的方法是什么？

我已经编写了我的html和typescript文件的代码。我在我的 Button 中创建了函数（onClick），那么我应该在这个函数中编写什么代码来在列表中添加项目？

我还在html代码中编写了 ngRepeat指令，但我不知道如何在typecipt文件中使用它。

html代码：

<div class="shadow-lg p-5 mb-5 bg-white rounded">

    <ul class = "list-group">

        <li *ngFor="let person of people" class = "list-group-item list-group-item-success">

            {{ person.name }} - {{ person.age }}

        </li>

    </ul>

    <br/>

    <ul class = "list-group">

        <li class = "list-group-item list-group-item-warning">

            <input type="name" class="form-control ng-untouched ng-pristine ng-valid" placeholder="Enter Name" [(ngModel)]="name" ngRepeat="detail in people">   <hr/>

            <input type="number" class="form-control ng-untouched ng-pristine ng-valid" placeholder="Enter Age" [(ngModel)]="age" ngRepeat="detail in people">  <hr/>

            <button type="button" class="btn btn-danger btn-block" (click)="onClick()"> Add </button>

        </li>

    </ul>

</div>

打字稿代码：

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

@Component({

  selector: 'app-menu',

  templateUrl: './menu.component.html',

  styleUrls: ['./menu.component.css']

})

export class MenuComponent implements OnInit {

  name: string;

  age: number;

  people: any[] = [{

    "name" : "abdul",

    "age" : 20

  }, {

    "name" : "david",

    "age" : 30

  }, {

    "name" : "ben",

    "age" : 40

  }]

  onClick() {

    this.people.push();

  }

  constructor() { }

  ngOnInit(): void {

  }

}

Answer 1

只需更改您的推送：onClick()&nbsp;{&nbsp;&nbsp;this.people.push({&nbsp;name:&nbsp;this.name,&nbsp;age:&nbsp;this.age&nbsp;});}演示：https://stackblitz.com/edit/angular-p3hkex