在 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() {  this.people.push({ name: this.name, age: this.age });}

演示：

https://stackblitz.com/edit/angular-p3hkex