在 AngularJS 中创建一个简单的表格
当我们在电子商务网站中创建网页时,我们需要使用一个表格来呈现大量复杂的信息,例如产品列表及其价格、员工列表、工资、就业日期等。
表格帮助我们以结构良好且易于理解的方式呈现这些数据。它还使我们能够更好地管理我们网站的屏幕空间。
因此,我们将使用 *ngFor
函数创建一个简单的表,然后将其传递给数据库。我们将使用 JSON Server Rest API
。
首先,我们将使用 VS Code 编辑器,它允许我们使用其中的终端来安装依赖项。然后,我们打开终端并输入 npm install -g json-server
并将 json server
安装到我们的系统中。
下一步是创建一个新项目。
创建项目后,我们打开项目文件夹并添加一个名为 db.json
的新文件。这是我们存储 REST API
将访问的数据的地方。
现在我们导航到 db.json
文件夹并输入我们想要在表上拥有的数据。
{
"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"
}
]
}
接下来要做的是导航 app.component.html
以使用 *ngFor
函数创建表。但在此之前,我们必须创建一个 Rest service
,它将访问 db.json
中的数据。
然后我们前往航站楼。在项目文件夹中,我们输入 ng generate service Rest
。
安装后,在 scr/app
文件夹中创建两个文件,rest.service.spec.ts
和 rest.service.ts
。我们现在需要导航到 rest.service.ts
进行一些编码:
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);
}
}
此服务有助于监视数据库将要传递的所需 url 中的活动。
然后我们前往 app.component.html
使用 *ngFor
函数创建表:
<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>
我们需要做的下一件事是前往 app.module.ts
进行更多编码。在这里,我们将 HttpClientModule
添加到导入数组中。
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 { }
为了使 db.json
中的表格日期可以被 HttpClient
读取,我们必须将其设为字符串属性。因此,我们创建了一个 Users.ts
文件,并输入以下代码:
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;
}
}
此时唯一要做的就是使用一些 CSS 样式美化表格:
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;
}
现在一切都应该可以正常工作了,但是我们可能会遇到一个错误,例如 Parameter mobile
隐含地具有 any
类型。
我们需要导航到 ts.config.json
文件并将 noImplicitAny: false
添加到列表中。然后我们还将 \\
添加到 noImplicitOverride: true,
以使设置无效。
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