Angular implements rendering the data filled in the form to the table

This article mainly introduces Angular's method of rendering the data filled in the form to the table. It is of great practical value. Friends who need it can refer to it. I hope it can help everyone.

1. Project Introduction

We will use the Angular framework to make a demo. The functions that this demo will implement are as follows:

Enter information in the X coordinate and Y coordinate text boxes, and then click Add. A corresponding data will appear in the table below. Click the delete button next to each item, and the information will be been deleted!

Because our table data is frequently refreshed, we separate it as a component.

2. Project directory

--------app

----------dataTable(file Clip)

------------dataTable.component.html

------------dataTable.component.css

--------dataTable.component.ts

----------app.component.html

-- --------app.component.css

----------app.component.ts

---------- app.module.ts

3. Code explanation

1.app.component.html

Let’s write the main framework first

<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 is used here. At the end of the article, we will explain how to import this thing.

2.app.component.ts

We need to use an additem() method to add functionality to the parent component

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

Here, if we do not define

xcood: any;

ycood: any;

, then the following error will occur

If we initialize them directly without declaring them, something will definitely go wrong. One thing to remember is that for any variable to be used, you must first declare it and then initialize it.

In the additem() function, we need to initialize these two variables. Remember to use this, otherwise the variables declared in the global scope will not be obtained. Because we click the add button to get the data in the form, so logically we have to put the acquisition steps in the additem() function. There is also a new way of writing here, because before I directly used

this.xcood = document.getElementsByName('xcood')[0].value; and could not get the data,

So I looked it up online and replaced it with the writing method above.

We declared an addArray array at the beginning. This array will store data objects one by one. The obtained data will be pushed to this array every time it is called in the additem() function.

Next we need to receive this array in the subcomponent and render it to the table.

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 '@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
      }
  }
}

Next we write logic for the function delete() of the delete button. The effect we want is to delete whichever item is clicked, so we need to first obtain the data object you want to delete, and then pass it to the parent component. Find the position of this data object in the array, and then delete it using the splice() function.

5.app.module.ts

Remember to register your new dataTable component in app.module.ts

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

4. Import of ngx-bootstrap

In fact, it is very simple. You need to enter cnpm install ngx-bootstrap --save in cmd first to install the module in the current directory

Then add

to the final export html file of the project. Copy the code. The code is as follows:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

Finally, it can be used directly when you write styles.

Related recommendations:

Basic methods for implementing react server rendering

Vue.js and ASP.NET Core Server-side rendering function

react back-end rendering template engine noox release usage method

The above is the detailed content of Angular implements rendering the data filled in the form to the table. For more information, please follow other related articles on the PHP Chinese website!