Erstellen einer einfachen Tabelle in AngularJS
Wenn wir Webseiten auf einer E-Commerce-Website erstellen, müssen wir eine Tabelle verwenden, um große, komplexe Informationen wie Produktlisten und deren Preise, Personalliste, Gehälter, Beschäftigungsdatum usw. darzustellen.
Tabellen helfen uns, diese Daten gut strukturiert und leicht verständlich darzustellen. Es ermöglicht uns auch, den Bildschirmbestand unserer Website besser zu verwalten.
Wir erstellen also eine einfache Tabelle mit der Funktion *ngFor und leiten sie dann durch eine Datenbank. Wir werden die JSON Server Rest API verwenden.
Zuerst verwenden wir den VS-Code-Editor, der es uns ermöglicht, Terminals von innen zu verwenden, um Abhängigkeiten zu installieren. Dann öffnen wir das Terminal und geben npm install -g json-server ein und installieren den json server auf unserem System.
Im nächsten Schritt erstellen Sie ein neues Projekt.
Nachdem das Projekt erstellt wurde, öffnen wir den Projektordner und fügen eine neue Datei namens db.json hinzu. Dort speichern wir die Daten, auf die die REST API zugreift.
Nun navigieren wir zum Ordner db.json und geben die Daten ein, die wir auf der Tabelle haben wollen.
{
"Users": [
{
"id": 1,
"firstName": "Nitin",
"lastName": "Rana",
"email": "nitin.rana@gmail.com",
"mobile": "2345678901",
"salary": "25000"
},
{
"id": 2,
"firstName": "Rajat",
"lastName": "Singh",
"email": "rajat.singh1@gmail.com",
"mobile": "5637189302",
"salary": "30000"
},
{
"id": 3,
"firstName": "Rahul",
"lastName": "Singh",
"email": "rahul.singh1@gmail.com",
"mobile": "5557189302",
"salary": "40000"
},
{
"id": 4,
"firstName": "Akhil",
"lastName": "Verma",
"email": "akhil.verma2@gmail.com",
"mobile": "5690889302",
"salary": "20000"
},
{
"id": 5,
"firstName": "Mohan",
"lastName": "Ram",
"email": "mohan.ram1@gmail.com",
"mobile": "7637189302",
"salary": "60000"
},
{
"id": 6,
"firstName": "Sohan",
"lastName": "Rana",
"email": "sohan.rana@gmail.com",
"mobile": "3425167890",
"salary": "25000"
},
{
"id": 7,
"firstName": "Rajjev",
"lastName": "Singh",
"email": "rajeev.singh1@gmail.com",
"mobile": "5637189302",
"salary": "30000"
},
{
"id": 8,
"firstName": "Mukul",
"lastName": "Singh",
"email": "mukul.singh1@gmail.com",
"mobile": "5557189302",
"salary": "40000"
},
{
"id": 9,
"firstName": "Vivek",
"lastName": "Verma",
"email": "vivek.verma2@gmail.com",
"mobile": "5690889302",
"salary": "20000"
},
{
"id": 10,
"firstName": "Shubham",
"lastName": "Singh",
"email": "shubham.singh@gmail.com",
"mobile": "7637189502",
"salary": "60000"
}
]
}
Als nächstes müssen Sie durch die app.component.html navigieren, um die Tabelle mit der *ngFor-Funktion zu erstellen. Aber vorher müssen wir einen Rest service erstellen, der auf die Daten von db.json zugreift.
Dann fahren wir zum Terminal. Im Projektordner geben wir ng generate service Rest ein.
Nach der Installation werden im Ordner scr/app zwei Dateien erstellt, die rest.service.spec.ts und die rest.service.ts. Wir müssen jetzt zu rest.service.ts navigieren, um etwas zu codieren:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Users } from './Users';
@Injectable({
providedIn: 'root'
})
export class RestService {
constructor(private http : HttpClient) { }
url : string = "http://localhost:3000/Users";
getUsers()
{
return this.http.get<Users[]>(this.url);
}
}
Dieser Dienst hilft bei der Überwachung von Aktivitäten in der gewünschten URL, an der die Datenbank vorbeigeht.
Dann gehen wir zu app.component.html, um die Tabelle mit der Funktion *ngFor zu erstellen:
<h1>Table using JSON Server API</h1>
<hr>
<table id="users">
<tr>
<th *ngFor="let col of columns">
{{col}}
</th>
</tr>
<tr *ngFor="let user of users">
<td *ngFor="let col of index">
{{user[col]}}
</td>
</tr>
</table>
Als nächstes müssen wir zu app.module.ts gehen, um weitere Codierungen vorzunehmen. Hier fügen wir das HttpClientModule zum imports-Array hinzu.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Um das Tabellendatum in der db.json für den HttpClient lesbar zu machen, müssen wir es zu einer String-Eigenschaft machen. Also erstellen wir eine Users.ts-Datei und geben diese Codes ein:
export class Users
{
id : string;
firstName : string;
lastName : string;
email : string;
mobile : string;
salary : string;
constructor(id, firstName, lastName, email, mobile, salary)
{
this.id = id;
this.firstName = firstName;
this.lastName = lastName;
this.email = email;
this.mobile = mobile;
this.salary = salary;
}
}
Das Einzige, was an dieser Stelle noch zu tun bleibt, ist, die Tabelle mit etwas CSS-Styling zu verschönern:
h1
{
text-align: center;
color: #4CAF50;
}
#users {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#users td, #users th {
border: 1px solid #ddd;
padding: 8px;
}
#users tr:nth-child(even){background-color: #f2f2f2;}
#users tr:hover {background-color: #ddd;}
#users th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
Alles sollte jetzt gut funktionieren, aber wir stolpern wahrscheinlich über einen Fehler wie Parameter mobile hat implizit einen beliebigen Typ.
Wir müssen zur Datei ts.config.json navigieren und der Liste noImplicitAny: false hinzufügen. Dann fügen wir beim noImplicitOverride: true, noch \\ hinzu, um die Einstellung zu inaktiv zu machen.
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn