這篇文章將為大家詳細(xì)講解有關(guān)Angular如何將填入表單的數(shù)據(jù)渲染到表格，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

為永和等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及永和網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)、永和網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

一、項(xiàng)目簡介

我們將采用Angular框架來做一個(gè)demo，這個(gè)demo將要實(shí)現(xiàn)的功能如下：

在X坐標(biāo)和Y坐標(biāo)文本框輸入信息，然后點(diǎn)擊添加，就會在下面表格 中出現(xiàn)一項(xiàng)相應(yīng)的數(shù)據(jù)，點(diǎn)擊每一項(xiàng)旁邊的刪除按鈕，該條信息就會被刪除！

因?yàn)槲覀兊谋砀駭?shù)據(jù)是經(jīng)常刷新的，所以我們把它獨(dú)立出來作為一個(gè)組件。

二、項(xiàng)目目錄

--------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

我們先把主體框架寫好

<div class="container">
 <div class="row">
  <form>
   <div class="form-group">
    <label for="exampleInputEmail1">X坐標(biāo)</label>
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="xcood" name="xcood">
   </div>
   <div class="form-group">
    <label for="exampleInputPassword1">Y坐標(biāo)</label>
    <input type="text" class="form-control" id="exampleInputPassword1" placeholder="ycood" name="ycood">
   </div>
   <button type="button" class="btn btn-default" (click)="additem()">添加</button>
  </form>  
 </div>
 <div class="row">
  <data-table [array]="addArray"></data-table><!--導(dǎo)入dataTable組件，并且將父組件里面的form表單數(shù)據(jù)傳遞給子組件渲染-->
 </div>
</div>

這里使用了ngx-bootstrap，文末我們再講解一下如何導(dǎo)入這個(gè)東西。

2.app.component.ts

我們再父組件需要用到一個(gè)添加功能的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;

的話，那么將會出現(xiàn)如下錯誤

我們沒有聲明就直接初始化他們了，肯定會出錯，要記住一件事，要用到什么變量，首先要先聲明它，再去給它初始化。

在additem()函數(shù)里面，我們要初始化這兩個(gè)變量了，記住要用this，否則獲取不到全局作用域聲明的變量。因?yàn)槲覀兪屈c(diǎn)擊添加按鈕再去獲取form表單里面的數(shù)據(jù)，所以在邏輯上我們要把獲取的步驟放在additem()函數(shù)里面。這里還有一個(gè)新的寫法，因?yàn)橹拔抑苯佑?/p>

this.xcood = document.getElementsByName('xcood')[0].value;是獲取不到數(shù)據(jù)的，

所以我在網(wǎng)上找了一下，替換成了上面那種寫法。

我們在一開始就聲明了一個(gè)addArray的數(shù)組，這個(gè)數(shù)組即將存放的是一條一條的數(shù)據(jù)對象，在additem()函數(shù)里面每調(diào)用一次就把獲取到的數(shù)據(jù)push給這個(gè)數(shù)組。

接下來我們就要在子組件接收這個(gè)數(shù)組，并且渲染到表格上。

3.dataTable.component.html

<table class="table table-striped">
 <thead>
  <tr>
   <th>X坐標(biāo)</th>
   <th>Y坐標(biāo)</th>
   <th>操作</th>
  </tr>
 </thead>
 <tbody *ngIf="array.length!==0"><!--這里我們判斷一下傳遞過來的數(shù)組是否為空，如果是空的話我們就沒有必要渲染出來了-->
  <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數(shù)組
  index: number;   //跟上面說的一樣要先聲明
  delete(data){
    this.index = this.array.indexOf(data);
    if (this.index > -1) {
      this.array.splice(this.index, 1);//跟上面說的一樣在初始化的時(shí)候要用到this
      }
  }
}

我們接下來給刪除按鈕的函數(shù)delete()編寫邏輯，我們要的效果是點(diǎn)擊哪一條就刪除哪一條，所以我們要先獲取到你要刪除的這條數(shù)據(jù)對象，然后在父組件傳遞過來數(shù)組里面查找到這條數(shù)據(jù)對象的位置，再用splice()函數(shù)刪除。

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的導(dǎo)入

其實(shí)很簡單，需要先在cmd輸入 cnpm install ngx-bootstrap --save在當(dāng)前目錄下安裝該模塊

然后在項(xiàng)目最后的出口html文件里面加入<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

最后直接可以在你編寫樣式的時(shí)候使用了。

關(guān)于“Angular如何將填入表單的數(shù)據(jù)渲染到表格”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

當(dāng)前標(biāo)題：Angular如何將填入表單的數(shù)據(jù)渲染到表格
URL地址：http://jinyejixie.com/article24/ijjpje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、小程序開發(fā)、網(wǎng)站營銷、云服務(wù)器、移動網(wǎng)站建設(shè)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)