一、項目簡介
我們將采用Angular框架來做一個demo，這個demo將要實現(xiàn)的功能如下：
在X坐標和Y坐標文本框輸入信息，然后點擊添加，就會在下面表格 中出現(xiàn)一項相應的數(shù)據(jù)，點擊每一項旁邊的刪除按鈕，該條信息就會被刪除！
因為我們的表格數(shù)據(jù)是經(jī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坐標</label> <input type="text" class="form-control" id="exampleInputEmail1" placeholder="xcood" name="xcood"> </div> <div class="form-group"> <label for="exampleInputPassword1">Y坐標</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><!--導入dataTable組件，并且將父組件里面的form表單數(shù)據(jù)傳遞給子組件渲染--> </div></div>
這里使用了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;
的話，那么將會出現(xiàn)如下錯誤
我們沒有聲明就直接初始化他們了，肯定會出錯，要記住一件事，要用到什么變量，首先要先聲明它，再去給它初始化。
在additem()函數(shù)里面，我們要初始化這兩個變量了，記住要用this，否則獲取不到全局作用域聲明的變量。因為我們是點擊添加按鈕再去獲取form表單里面的數(shù)據(jù)，所以在邏輯上我們要把獲取的步驟放在additem()函數(shù)里面。這里還有一個新的寫法，因為之前我直接用
this.xcood = document.getElementsByName('xcood')[0].value;是獲取不到數(shù)據(jù)的，
所以我在網(wǎng)上找了一下，替換成了上面那種寫法。
我們在一開始就聲明了一個addArray的數(shù)組，這個數(shù)組即將存放的是一條一條的數(shù)據(jù)對象，在additem()函數(shù)里面每調用一次就把獲取到的數(shù)據(jù)push給這個數(shù)組。
接下來我們就要在子組件接收這個數(shù)組，并且渲染到表格上。
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"><!--這里我們判斷一下傳遞過來的數(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);//跟上面說的一樣在初始化的時候要用到this } }}我們接下來給刪除按鈕的函數(shù)delete()編寫邏輯，我們要的效果是點擊哪一條就刪除哪一條，所以我們要先獲取到你要刪除的這條數(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的導入
其實很簡單，需要先在cmd輸入 cnpm install ngx-bootstrap --save在當前目錄下安裝該模塊
然后在項目最后的出口html文件里面加入
最后直接可以在你編寫樣式的時候使用了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
