Heim > Artikel > Web-Frontend > Angular implementiert die Darstellung der im Formular ausgefüllten Daten in der Tabelle
In diesem Artikel wird hauptsächlich die Methode von Angular vorgestellt, mit der die im Formular ausgefüllten Daten in die Tabelle übernommen werden. Ich hoffe, dass sie allen helfen kann.
1. Projekteinführung
Wir werden das Angular-Framework verwenden, um eine Demo zu erstellen. Die Funktionen, die diese Demo implementieren wird, sind wie folgt:
Geben Sie die Informationen in die Textfelder X-Koordinate und Y-Koordinate ein und klicken Sie dann auf „Hinzufügen“. In der Tabelle unten werden die entsprechenden Daten angezeigt Die Informationen werden gelöscht!
Da unsere Tabellendaten häufig aktualisiert werden, trennen wir sie als Komponente.
2. Projektverzeichnis
--------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-Erklärung
1.app.component.html
Lassen Sie uns zuerst das Hauptframework schreiben
<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 wird hier verwendet. Am Ende des Artikels erklären wir, wie man dieses Ding importiert.
2.app.component.ts
Wir müssen eine additem()-Methode verwenden, um der übergeordneten Komponente Funktionalität hinzuzufügen
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 }) } }
Wenn wir hier nicht
xcood: any;
ycood: any;
definieren, wird der folgende Fehler angezeigt
Wenn wir sie direkt initialisieren, ohne sie zu deklarieren, wird definitiv etwas schiefgehen. Beachten Sie, dass Sie eine Variable zuerst deklarieren und dann initialisieren müssen, damit sie verwendet werden kann.
In der Funktion additem() müssen wir diese beiden Variablen initialisieren. Denken Sie daran, dies zu verwenden, da sonst die im globalen Bereich deklarierten Variablen nicht abgerufen werden. Da wir auf die Schaltfläche „Hinzufügen“ klicken, um die Daten im Formular abzurufen, müssen wir logischerweise die Erfassungsschritte in die Funktion additem() einfügen. Hier gibt es auch eine neue Schreibweise, denn vorher habe ich
this.xcood = document.getElementsByName('xcood')[0].value; direkt verwendet, konnte aber die Daten nicht abrufen,
Also habe ich es online nachgeschlagen und durch die oben beschriebene Schreibweise ersetzt.
Wir haben zu Beginn ein addArray-Array deklariert. Bei jedem Aufruf der Funktion additem() werden die erhaltenen Daten in dieses Array verschoben.
Als nächstes müssen wir dieses Array in der Unterkomponente empfangen und in die Tabelle rendern.
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 } } }
Als nächstes schreiben wir die Logik für die Funktion delete() der Schaltfläche „Löschen“. Der gewünschte Effekt besteht darin, das angeklickte Element zu löschen. Daher müssen wir zuerst das Datenobjekt abrufen, das Sie löschen möchten, und dann das Die übergeordnete Komponente durchläuft das Array, um den Speicherort des Datenobjekts zu finden, und verwendet dann die Funktion splice(), um es zu löschen.
5.app.module.ts
Denken Sie daran, Ihre neue dataTable-Komponente 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 { }zu registrieren
4. Import von ngx-bootstrap
Tatsächlich ist es sehr einfach, zuerst cnpm install ngx-bootstrap --save in cmd einzugeben das aktuelle Verzeichnis
Dann fügen Sie
zur endgültigen Export-HTML-Datei des Projekts hinzu. Kopieren Sie den Code . Der Code lautet wie folgt:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
Endlich kann es direkt beim Schreiben von Stilen verwendet werden.
Verwandte Empfehlungen:
Implementierung der grundlegenden Methode des Reaktionsserver-Renderings
Vue.js und ASP. NET Core Serverseitige Rendering-Funktion
Nutzungsmethode der Noox-Release-Nutzungsmethode der Back-End-Rendering-Vorlagen-Engine
Das obige ist der detaillierte Inhalt vonAngular implementiert die Darstellung der im Formular ausgefüllten Daten in der Tabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!