迹忆客 专注技术分享

当我们在电子商务网站中创建网页时，我们需要使用一个表格来呈现大量复杂的信息，例如产品列表及其价格、员工列表、工资、就业日期等。

表格帮助我们以结构良好且易于理解的方式呈现这些数据。它还使我们能够更好地管理我们网站的屏幕空间。

因此，我们将使用 *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, 以使设置无效。