Angular如何将填入表单的数据渲染到表格

这篇文章将为大家详细讲解有关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

我们先把主体框架写好

Y坐标

添加

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

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数组 index: number; //跟上面说的一样要先声明 delete(data){ this.index = this.array.indexOf(data); if (this.index > -1) { this.array.splice(this.index, 1);//跟上面说的一样在初始化的时候要用到this } } }

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

重庆分公司，新征程启航

Angular如何将填入表单的数据渲染到表格

其他资讯