日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 
  

   
    X坐標(biāo)
    
   

這里使用了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

 
  
   X坐標(biāo)
   Y坐標(biāo)
   操作
  
 
 
  
   {{data.xcood}}
   {{data.ycood}}
   刪除
  
 

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文件里面加入

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

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