Html 使用“角度”将数据插入表行

我是angular的新手，目前正在从事我的个人项目。 我有一个关于如何向表行插入新数据的问题。 谁能给我一个片段/例子来说明如何做到这一点

以下是表格和表格标题：

添加
&时代；
身份证件
名称
年
专业
地址
电子邮件
电话


辛潘
巴塔尔
身份证件
名称
年
专业
地址
电子邮件
电话

您可以像这样在app.component.ts文件中声明自定义对象数组

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

@Component({
  selector: 'app-root',
  template: `
  <div class="container">
  <table class="table table-responsive table-striped">
    <tr>
      <th>id</th>
      <th>name</th>
      <th>year</th>
    </tr>
    <tr *ngFor="let row of rows">
      <td>{{row.id}}</td>
      <td>{{row.name}}</td>
      <td>{{row.year}}</td>
    </tr>
  </table>
  <div>

  <hr />
  <input type="text" [(ngModel)]="id" placeholder="id" />
  <input type="text" [(ngModel)]="name" placeholder="name" />
  <input type="text" [(ngModel)]="year" placeholder="year" />

  <button (click)="buttonClicked()">Click to Insert New Row</button>
  `,
  styles: []
})
export class AppComponent {
  title = 'app';

  public id: number;
  public name: string;
  public year: number;
  public rows: Array<{id: number, name: string, year: number}> = [];

  buttonClicked() {
    this.rows.push( {id: this.id, name: this.name, year: this.year } );

    //if you want to clear input
    this.id = null;
    this.name = null;
    this.year = null;
  }
}

从'@angular/core'导入{Component}；
从'@angular/forms'导入{FormsModule}；
@组成部分({
选择器：'应用程序根'，
模板：`
身份证件
名称
年
{{row.id}}
{{row.name}
{{row.year}

单击以插入新行
`,
样式：[]
})
导出类AppComponent{
标题=‘应用程序’；
公众id：号码；
公共名称：字符串；
公众年：数目；
公共行：数组=[]；
按钮点击（）{
this.rows.push（{id:this.id，name:this.name，year:this.year}）；
//如果要清除输入
this.id=null；
this.name=null；
this.year=null；
}
}

您可以像这样在app.component.ts文件中声明自定义对象数组

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

@Component({
  selector: 'app-root',
  template: `
  <div class="container">
  <table class="table table-responsive table-striped">
    <tr>
      <th>id</th>
      <th>name</th>
      <th>year</th>
    </tr>
    <tr *ngFor="let row of rows">
      <td>{{row.id}}</td>
      <td>{{row.name}}</td>
      <td>{{row.year}}</td>
    </tr>
  </table>
  <div>

  <hr />
  <input type="text" [(ngModel)]="id" placeholder="id" />
  <input type="text" [(ngModel)]="name" placeholder="name" />
  <input type="text" [(ngModel)]="year" placeholder="year" />

  <button (click)="buttonClicked()">Click to Insert New Row</button>
  `,
  styles: []
})
export class AppComponent {
  title = 'app';

  public id: number;
  public name: string;
  public year: number;
  public rows: Array<{id: number, name: string, year: number}> = [];

  buttonClicked() {
    this.rows.push( {id: this.id, name: this.name, year: this.year } );

    //if you want to clear input
    this.id = null;
    this.name = null;
    this.year = null;
  }
}

从'@angular/core'导入{Component}；
从'@angular/forms'导入{FormsModule}；
@组成部分({
选择器：'应用程序根'，
模板：`
身份证件
名称
年
{{row.id}}
{{row.name}
{{row.year}

单击以插入新行
`,
样式：[]
})
导出类AppComponent{
标题=‘应用程序’；
公众id：号码；
公共名称：字符串；
公众年：数目；
公共行：数组=[]；
按钮点击（）{
this.rows.push（{id:this.id，name:this.name，year:this.year}）；
//如果要清除输入
this.id=null；
this.name=null；
this.year=null；
}
}

//html数据//
类型
名称
击球手
浇头
{{data.type}
{{data.name}


{{item.type}




{{y.type}


//component.ts文件//
导出类AppComponent{
公共新文本：任何；
公共行：any=[]；
公共url:any=[“./assets/images/image.jpeg”、“./assets/images/danger.jpeg”、“./assets/images/crab.jpeg”，
“./assets/images/aws.png”、“./assets/images/error404.jpg”、“./assets/images/night.jpg”]；
公共显示图像：any=[”./assets/images/image.jpeg“]；
public setimage:boolean=true；
公共i：任意=1；
Newjson=[
{
“id”：“0001”，
“类型”：“甜甜圈”，
“名字”：“蛋糕”，
“ppu”：0.55，
“击球手”：
{
“面糊”：
[
{“id”：“1001”，“type”：“Regular”}，
{“id”：“1002”，“type”：“Chocolate”}，
{“id”：“1003”，“type”：“Blueberry”}，
{“id”：“1004”，“type”：“魔鬼食品”}
]
},
“浇头”：
[
{“id”：“5001”，“type”：“None”}，
{“id”：“5002”，“type”：“glassed”}，
{“id”：“5005”，“type”：“Sugar”}，
{“id”：“5007”，“类型”：“糖粉”}，
{“id”：“5006”，“type”：“巧克力洒”}，
{“id”：“5003”，“type”：“Chocolate”}，
{“id”：“5004”，“type”：“Maple”}
]
},
{
“id”：“0002”，
“类型”：“甜甜圈”，
“名称”：“提出”，
“ppu”：0.55，
“击球手”：
{
“面糊”：
[
{“id”：“1001”，“type”：“Regular”}
]
},
“浇头”：
[
{“id”：“5001”，“type”：“None”}，
{“id”：“5002”，“type”：“glassed”}，
{“id”：“5005”，“type”：“Sugar”}，
{“id”：“5003”，“type”：“Chocolate”}，
{“id”：“5004”，“type”：“Maple”}
]
},
{
“id”：“0003”，
“类型”：“甜甜圈”，
“名称”：“老式”，
“ppu”：0.55，
“击球手”：
{
“面糊”：
[
{“id”：“1001”，“type”：“Regular”}，
{“id”：“1002”，“type”：“Chocolate”}
]
},
“浇头”：
[
{“id”：“5001”，“type”：“None”}，
{“id”：“5002”，“type”：“glassed”}，
{“id”：“5003”，“type”：“Chocolate”}，
{“id”：“5004”，“type”：“Maple”}
]
}
]
}

//html数据//
类型
名称
击球手
浇头
{{data.type}
{{data.name}


{{item.type}




{{y.type}


//c