首頁  >  文章  >  web前端  >  Angular實作將填入表單的資料渲染到表格

Angular實作將填入表單的資料渲染到表格

小云云
小云云原創
2018-02-03 14:41:121657瀏覽

本文主要和大家介紹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 &#39;@angular/core&#39;;

@Component({
 selector: &#39;app-root&#39;,
 templateUrl: &#39;./app.component.html&#39;,
 styleUrls: [&#39;./app.component.css&#39;]
})
export class AppComponent {
 addArray=[];
 xcood: any;
 ycood: any;

 additem(){
  this.xcood = (document.getElementsByName(&#39;xcood&#39;)[0] as HTMLInputElement).value;
  this.ycood = (document.getElementsByName(&#39;ycood&#39;)[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 &#39;@angular/core&#39;;

@Component({
 selector: &#39;data-table&#39;,
 templateUrl: &#39;./dataTable.component.html&#39;,
 styleUrls: [&#39;./dataTable.component.css&#39;]
})
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 &#39;@angular/platform-browser&#39;;
import { NgModule } from &#39;@angular/core&#39;;

import { AppComponent } from &#39;./app.component&#39;;
import { DataTableComponent } from &#39;./dataTable/dataTable.component&#39;;

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

最後直接可以在你寫樣式的時候使用了。

相關建議:

實作react伺服器渲染基礎方法

Vue.js與ASP.NET Core服務端渲染功能

react後端渲染模板引擎noox發佈使用方法

以上是Angular實作將填入表單的資料渲染到表格的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn