本文主要和大家介紹Angular將填入表單的資料渲染到表格的方法，非常具有實用價值，需要的朋友可以參考下，希望能幫助到大家。
一、專案簡介
我們將採用Angular框架來做一個demo，這個demo將要實現的功能如下：
在X座標和Y座標文字方塊輸入訊息，然後點擊添加，就會在下面表格中出現一項相應的數據，點擊每一項旁邊的刪除按鈕，該條訊息就會被刪除！
因為我們的表格資料是經常刷新的，所以我們把它獨立出來作為一個元件。
二、專案目錄
--------app
----------dataTable(文件夾)
------------dataTable.component.html
------------dataTable.component.css
------------dataTable.component.ts
----------app.component.html
-- --------app.component.css
----------app.component.ts
---------- app.module.ts
三、程式碼講解
1.app.component.html
我們先把主體框架寫好
<p class="container">
<p class="row">
<form>
<p class="form-group">
<label for="exampleInputEmail1">X坐标</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="xcood" name="xcood">
</p>
<p class="form-group">
<label for="exampleInputPassword1">Y坐标</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="ycood" name="ycood">
</p>
<button type="button" class="btn btn-default" (click)="additem()">添加</button>
</form>
</p>
<p class="row">
<data-table [array]="addArray"></data-table><!--导入dataTable组件，并且将父组件里面的form表单数据传递给子组件渲染-->
</p>
</p>這裡使用了ngx-bootstrap，文末我們再講解一下如何導入這個東西。
2.app.component.ts
我們再父元件需要用到一個新增功能的additem()方法
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
addArray=[];
xcood: any;
ycood: any;
additem(){
this.xcood = (document.getElementsByName('xcood')[0] as HTMLInputElement).value;
this.ycood = (document.getElementsByName('ycood')[0] as HTMLInputElement).value;
this.addArray.push({
xcood:this.xcood,
ycood:this.ycood
})
}
}在這裡面，如果我們不定義
xcood: any;
ycood: any;
的話，那麼將會出現如下錯誤
#我們沒有聲明就直接初始化他們了，肯定會出錯，要記住一件事，要用到什麼變量，首先要先聲明它，再去給它初始化。
在additem()函數裡面，我們要初始化這兩個變數了，記得要用this，否則取得不到全域作用域宣告的變數。因為我們是點選新增按鈕再去取得form表單裡面的數據，所以在邏輯上我們要把取得的步驟放在additem()函數裡面。這裡還有一個新的寫法，因為之前我直接用
this.xcood = document.getElementsByName('xcood')[0].value;是取得不到資料的，
所以我上網找了一下，替換成了上面那種寫法。
我們在一開始就宣告了一個addArray的數組，這個數組即將存放的是一條一條的資料對象，在additem()函數裡面每調用一次就把獲取到的資料push給這個數組。
接下來我們就要在子元件接收這個數組，並且渲染到表格上。
3.dataTable.component.html
<table class="table table-striped">
<thead>
<tr>
<th>X坐标</th>
<th>Y坐标</th>
<th>操作</th>
</tr>
</thead>
<tbody *ngIf="array.length!==0"><!--这里我们判断一下传递过来的数组是否为空，如果是空的话我们就没有必要渲染出来了-->
<tr *ngFor="let data of array">
<td>{{data.xcood}}</td>
<td>{{data.ycood}}</td>
<td><button type="button" class="btn btn-default" (click)="delete(data)">删除</button></td>
</tr>
</tbody>
</table>4.dataTable.component.ts
import { Component,Input } from '@angular/core';
@Component({
selector: 'data-table',
templateUrl: './dataTable.component.html',
styleUrls: ['./dataTable.component.css']
})
export class DataTableComponent {
@Input() array:any;//接收父组件传递过来的addArray数组
index: number; //跟上面说的一样要先声明
delete(data){
this.index = this.array.indexOf(data);
if (this.index > -1) {
this.array.splice(this.index, 1);//跟上面说的一样在初始化的时候要用到this
}
}
}我們接下來給刪除按鈕的函數delete()編寫邏輯，我們要的效果是點擊哪一條就刪除哪一條，所以我們要先取得到你要刪除的這條資料對象，然後在父元件傳遞過來陣列裡面查找到這條資料物件的位置，再用splice()函數刪除。
5.app.module.ts
記得要在app.module.ts裡面註冊你新建的dataTable元件
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DataTableComponent } from './dataTable/dataTable.component';
@NgModule({
declarations: [
AppComponent,
DataTableComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }四、ngx-bootstrap的導入
其實很簡單，需要先在cmd輸入cnpm install ngx-bootstrap --save在目前目錄下安裝模組
然後在專案最後的出口html檔案裡面加入
複製程式碼 程式碼如下:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
最後直接可以在你寫樣式的時候使用了。
相關建議：
以上是Angular實作將填入表單的資料渲染到表格的詳細內容。更多資訊請關注PHP中文網其他相關文章！
