欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular將填入表單的數(shù)據(jù)渲染到表格的方法

 更新時間:2017年09月22日 08:28:01   作者:fyk曩昔  
這篇文章主要介紹了Angular將填入表單的數(shù)據(jù)渲染到表格的方法,非常具有實用價值,需要的朋友可以參考下

一、項目簡介

我們將采用Angular框架來做一個demo,這個demo將要實現(xiàn)的功能如下:

在X坐標(biāo)和Y坐標(biāo)文本框輸入信息,然后點擊添加,就會在下面表格 中出現(xiàn)一項相應(yīng)的數(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坐標(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)入這個東西。

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ù)里面每調(diào)用一次就把獲取到的數(shù)據(jù)push給這個數(shù)組。

接下來我們就要在子組件接收這個數(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);//跟上面說的一樣在初始化的時候要用到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的導(dǎo)入

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

然后在項目最后的出口html文件里面加入

復(fù)制代碼 代碼如下:

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

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • AngularJS入門教程之REST和定制服務(wù)詳解

    AngularJS入門教程之REST和定制服務(wù)詳解

    本文主要講解 AngularJS REST和定制服務(wù)的知識,這里幫大家整理了相關(guān)知識,并附示例代碼,詳細(xì)講解了RES和定制服務(wù)的知識,有興趣的小伙伴可以參考下
    2016-08-08
  • 詳解Angular數(shù)據(jù)綁定及其實現(xiàn)方式

    詳解Angular數(shù)據(jù)綁定及其實現(xiàn)方式

    數(shù)據(jù)綁定是將應(yīng)用程序UI或用戶界面綁定到模型的機(jī)制。使用數(shù)據(jù)綁定,用戶將能夠使用瀏覽器來操縱網(wǎng)站上存在的元素。
    2021-05-05
  • Angularjs實現(xiàn)帶查找篩選功能的select下拉框示例代碼

    Angularjs實現(xiàn)帶查找篩選功能的select下拉框示例代碼

    這篇文章主要介紹了Angularjs實現(xiàn)帶查找篩選功能的select下拉框的詳細(xì)過程及示例代碼,文中通過示例介紹的很詳細(xì),相信會對大家學(xué)習(xí)使用Angularjs具有一定的參考借鑒價值,有需要的朋友們可以一起來看看。
    2016-10-10
  • Angular實現(xiàn)svg和png圖片下載實現(xiàn)

    Angular實現(xiàn)svg和png圖片下載實現(xiàn)

    這篇文章主要介紹了Angular實現(xiàn)svg和png圖片下載實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • Angularjs中$http以post請求通過消息體傳遞參數(shù)的實現(xiàn)方法

    Angularjs中$http以post請求通過消息體傳遞參數(shù)的實現(xiàn)方法

    這篇文章主要介紹了Angularjs中$http以post請求通過消息體傳遞參數(shù)的方法,結(jié)合實例形式分析了$http使用post請求傳遞參數(shù)的相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下
    2016-08-08
  • AngularJS實現(xiàn)給動態(tài)生成的元素綁定事件的方法

    AngularJS實現(xiàn)給動態(tài)生成的元素綁定事件的方法

    這篇文章主要介紹了AngularJS實現(xiàn)給動態(tài)生成的元素綁定事件的方法,結(jié)合實例形式分析了AngularJS動態(tài)生成元素與事件綁定相關(guān)操作技巧,需要的朋友可以參考下
    2016-12-12
  • 詳解angular element()方法使用

    詳解angular element()方法使用

    本篇文章主要介紹了詳解angular element()方法使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04
  • 使用Angular material主題定義自己的組件庫的配色體系

    使用Angular material主題定義自己的組件庫的配色體系

    這篇文章主要介紹了使用Angular material主題定義自己的組件庫的配色體系的相關(guān)知識,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-09-09
  • AngularJS extend用法詳解及實例代碼

    AngularJS extend用法詳解及實例代碼

    這篇文章主要介紹了AngularJS extend用法詳解的相關(guān)資料,并附實例代碼,幫助大家學(xué)習(xí)理解,需要的朋友可以參考下
    2016-11-11
  • Angular4學(xué)習(xí)筆記router的簡單使用

    Angular4學(xué)習(xí)筆記router的簡單使用

    本篇文章主要介紹了Angular4學(xué)習(xí)筆記router的簡單使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03

最新評論