typescript 使用 Angular 将数据插入表行

Insert data to table row using Angular

提问by Wira Xie

I am new to angular, and currently working on my personal project. I have a question about how to insert new data to table row. Can anyone give me snippet/example how to do this?

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

Here is the form and the table headers:

这是表格和表格标题：

<!--app.component.html-->

<!--show modal-->
<a href="#" (click)="smModal.show()" popover="Tambah Data Mhs" placement="bottom" triggers="mouseenter:mouseleave">ADD</a>

<!--Modal-->
<div class="container">
    <div bsModal #smModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="myModal">
        <div class="modal-dialog modal-sm">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title pull-left">Add</h4>
              <button type="button" class="close pull-right" aria-label="Close" (click)="smModal.hide()">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form>
                <label>ID</label>
                <input type="text" class="form-control" placeholder="id">

                <label>name</label>
                <input type="text" class="form-control" placeholder="name">

                <label>year</label>
                <input type="text" class="form-control" placeholder="year">

                <label>major</label>
                <input type="text" class="form-control" placeholder="major">

                <label>address</label>
                <input type="text" class="form-control" placeholder="address">

                <label>Email</label>
                <input type="text" class="form-control" placeholder="email">

                <label>phone</label>
                <input type="text" class="form-control" placeholder="phone"><br>
                
                <button type="submit" class="btn btn-primary">Simpan</button>
                <button class="btn btn-danger">Batal</button>
              </form>
            </div>
          </div>
        </div>
      </div>
<!--enf of modal-->

<!--table-->
<div class="container">
  <table class="table table-responsive table-striped">
    <tr>
      <th>id</th>
      <th>name</th>
      <th>year</th>
      <th>major</th>
      <th>address</th>
      <th>email</th>
      <th>phone</th>
    </tr>
  </table>
<div>
<!--end of table-->

Here is the typescript file:

这是打字稿文件：

//app.component.ts

import { Component } from '@angular/core';
import { TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';
import { NgIf } from '@angular/common';

 @Component({
  selector: 'app-root',
  styleUrls:['app.component.css'],
  templateUrl:'app.component.html',
  //template:`<h1 align="center">template</h1>`
})

export class AppComponent 
{
  title = 'title';

}

What I need to do is simply insert the user input from that from into a table row. Please let me know if more snippets are needed.

我需要做的只是将用户输入从 from 插入到表行中。如果需要更多片段，请告诉我。

回答by Metehan Senol

You can declare custom object array in your app.component.ts file like this

您可以像这样在 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;
  }
}

回答by sukumar

// html data//   

 <table border="1">
   <thead>
      <tr>
        <th>Type</th>
        <th>Name</th>
        <th>Batters</th>
        <th>Toppings</th>
      </tr>
   </thead>
   <tbody>
      <tr *ngFor="let data of Newjson;">
        <td >
          {{data.type}}  
        </td>
        <td>
              {{data.name}}  
          </td>
          <td>
               <ul *ngFor="let item of data.batters.batter;" [ngClass]="{'devils-find':item.type==='Devil\'s Food'}">
                 <li [ngClass]="item.type">
                    {{item.type}} 
                 </li>
               </ul>
            </td>
            <td>
                <ul *ngFor="let y of data.topping;">
                    <li>
                       {{y.type}} 
                    </li>
                  </ul>
              </td>

     </tr> 
    </tbody>
  </table>

//component.ts file//

export class AppComponent {
public newtext:any;
public rows:any=[];
public 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"];
public displayimage:any=["../assets/images/image.jpeg"];
public setimage:boolean=true;
public i:any=1;


Newjson=[
    {
      "id": "0001",
      "type": "donut",
      "name": "Cake",
      "ppu": 0.55,
      "batters":
        {
          "batter":
            [
              { "id": "1001", "type": "Regular"},
              { "id": "1002", "type": "Chocolate"},
              { "id": "1003", "type": "Blueberry"},
              { "id": "1004", "type": "Devil's Food"}
            ]
        },
      "topping":
        [
          { "id": "5001", "type": "None" },
          { "id": "5002", "type": "Glazed" },
          { "id": "5005", "type": "Sugar" },
          { "id": "5007", "type": "Powdered Sugar" },
          { "id": "5006", "type": "Chocolate with Sprinkles" },
          { "id": "5003", "type": "Chocolate"},
          { "id": "5004", "type": "Maple" }
        ]
    },
    {
      "id": "0002",
      "type": "donut",
      "name": "Raised",
      "ppu": 0.55,
      "batters":
        {
          "batter":
            [
              { "id": "1001", "type": "Regular"}
            ]
        },
      "topping":
        [
          { "id": "5001", "type": "None" },
          { "id": "5002", "type": "Glazed" },
          { "id": "5005", "type": "Sugar" },
          { "id": "5003", "type": "Chocolate"},
          { "id": "5004", "type": "Maple" }
        ]
    },
    {
      "id": "0003",
      "type": "donut",
      "name": "Old Fashioned",
      "ppu": 0.55,
      "batters":
        {
          "batter":
            [
              { "id": "1001", "type": "Regular"},
              { "id": "1002", "type": "Chocolate"}
            ]
        },
      "topping":
        [
          { "id": "5001", "type": "None" },
          { "id": "5002", "type": "Glazed" },
          { "id": "5003", "type": "Chocolate"},
          { "id": "5004", "type": "Maple" }
        ]
    }
  ]
}