迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > Angular >

在 AngularJS 中创建一个简单的表格

作者:迹忆客 最近更新:2023/04/13 浏览次数:

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

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

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

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便