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!