Angular implémente le rendu des données remplies dans le formulaire dans la table

Cet article présente principalement la méthode d'Angular pour rendre les données remplies dans le formulaire dans le tableau. Il est d'une grande valeur pratique. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

1. Introduction au projet

Nous utiliserons le framework Angular pour réaliser une démo Les fonctions que cette démo implémentera sont les suivantes :

Entrez les informations dans les zones de texte Coordonnée X et Coordonnée Y, puis cliquez sur Ajouter. Une donnée correspondante apparaîtra dans le tableau ci-dessous. Cliquez sur le bouton Supprimer à côté de chaque élément, puis sur le bouton Supprimer. les informations seront supprimées !

Étant donné que les données de notre table sont fréquemment actualisées, nous les séparons en tant que composant.

2. Répertoire du projet

--------app

----------dataTable(fichier Clip)

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

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

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

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

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

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

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

3. Explication du code

1.app.component.html

Écrivons d'abord le framework principal

<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 est utilisé ici. À la fin de l'article, nous expliquerons comment importer cette chose.

2.app.component.ts

Nous devons utiliser une méthode additem() pour ajouter des fonctionnalités au composant parent

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

Ici, si on ne définit pas

xcood: any;

ycood: any;

, alors l'erreur suivante apparaîtra

Si nous les initialisons directement sans les déclarer, quelque chose va certainement mal se passer. Une chose à retenir est que pour qu'une variable soit utilisée, vous devez d'abord la déclarer puis l'initialiser.

Dans la fonction additem(), nous devons initialiser ces deux variables. Pensez à utiliser ceci, sinon les variables déclarées dans le scope global ne seront pas obtenues. Parce que nous cliquons sur le bouton Ajouter pour obtenir les données sous le formulaire, nous devons donc logiquement mettre les étapes d'acquisition dans la fonction additem(). Il y a aussi une nouvelle façon d'écrire ici, car avant j'utilisais directement

this.xcood = document.getElementsByName('xcood')[0].value; 🎜> J'ai donc cherché sur Internet et je l'ai remplacé par la méthode d'écriture ci-dessus.

Nous avons déclaré un tableau addArray au début. Ce tableau stockera les objets de données un par un. Chaque fois que la fonction additem() sera appelée, les données obtenues seront poussées vers ce tableau.

Ensuite, nous devons recevoir ce tableau dans le sous-composant et le restituer dans la table.

3.dataTable.component.html

4.dataTable.component.ts

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

Ensuite, nous écrivons la logique pour la fonction delete() du bouton Supprimer. L'effet que nous souhaitons est de supprimer l'élément sur lequel vous avez cliqué, nous devons donc d'abord obtenir l'objet de données que vous souhaitez supprimer, puis Le Le composant parent parcourt le tableau pour trouver l'emplacement de l'objet de données, puis utilise la fonction splice() pour le supprimer.

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

5.app.module.ts

N'oubliez pas d'enregistrer votre nouveau composant dataTable dans 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. Importation de ngx-bootstrap

En fait, c'est très simple Vous devez d'abord saisir cnpm install ngx-bootstrap --save dans cmd pour installer le module dans. le répertoire courant

Puis ajoutez

au fichier html d'export final du projet Copiez le code

Le code est le suivant : <.>Enfin, il peut être utilisé directement lorsque vous écrivez des styles .

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

Recommandations associées :

Mise en œuvre de la méthode de base du rendu du serveur React

Vue.js et ASP. NET Core Fonction de rendu côté serveur

Méthode d'utilisation du moteur de modèle de rendu back-end React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!