1 <div class="container">
 2   <div class="row">
 3     <form>
 4       <div class="form-group">
 5         <label for="exampleInputEmail1">X坐标</label>
 6         <input type="text" class="form-control" id="exampleInputEmail1" placeholder="xcood" name="xcood">
 7       </div>
 8       <div class="form-group">
 9         <label for="exampleInputPassword1">Y坐标</label>
10         <input type="text" class="form-control" id="exampleInputPassword1" placeholder="ycood" name="ycood">
11       </div>
12       <button type="button" class="btn btn-default" (click)="additem()">添加</button>
13     </form>    
14   </div>
15   <div class="row">
16     <data-table [array]="addArray"></data-table><!--导入dataTable组件，并且将父组件里面的form表单数据传递给子组件渲染-->
17   </div>
18 </div>

 1 import { Component } from '@angular/core';
 2 
 3 @Component({
 4   selector: 'app-root',
 5   templateUrl: './app.component.html',
 6   styleUrls: ['./app.component.css']
 7 })
 8 export class AppComponent {
 9   addArray=[];
10   xcood: any;
11   ycood: any;
12 
13   additem(){
14     this.xcood = (document.getElementsByName('xcood')[0] as HTMLInputElement).value;
15     this.ycood = (document.getElementsByName('ycood')[0] as HTMLInputElement).value;
16     this.addArray.push({
17       xcood:this.xcood,
18       ycood:this.ycood
19     })
20   }
21 }

 1 import { Component,Input } from '@angular/core';
 2 
 3 @Component({
 4   selector: 'data-table',
 5   templateUrl: './dataTable.component.html',
 6   styleUrls: ['./dataTable.component.css']
 7 })
 8 export class DataTableComponent {
 9     @Input() array:any;//接收父组件传递过来的addArray数组
10     index: number;     //跟上面说的一样要先声明
11     delete(data){
12         this.index = this.array.indexOf(data);
13         if (this.index > -1) {
14             this.array.splice(this.index, 1);//跟上面说的一样在初始化的时候要用到this
15             }
16     }
17 }

 1 import { BrowserModule } from '@angular/platform-browser';
 2 import { NgModule } from '@angular/core';
 3 
 4 import { AppComponent } from './app.component';
 5 import { DataTableComponent } from './dataTable/dataTable.component';
 6 
 7 @NgModule({
 8   declarations: [
 9     AppComponent,
10     DataTableComponent
11   ],
12   imports: [
13     BrowserModule
14   ],
15   providers: [],
16   bootstrap: [AppComponent]
17 })
18 export class AppModule { }