snmp 获取mac add table_[Angular 组件库 NG-ZORRO 基础入门] Day 04 - 待办事项 + Table

前言回顾

前两天我们已经完成了项目基本布局，大家对 NG-ZORRO 的一些组件使用方式、文档查阅等都有了一些简单地了解，但是，最好的学习永远是实践。今天开始，我们就以一些简单的实战项目，来学习更多如 Table、Form、Drawer、List 等等开发者最常用的组件，由浅入深，逐步发掘 NG-ZORRO 的新玩法。

第一个实战项目就是 TODO 待办事项，和肥皂剧的烂俗剧情一样，我们也是从最最最普通的项目开始入手，不过我尽量会让这个俗套的例子做到有一些小惊喜，能够帮助大家在开发过程中有一些不一样的收获。

关于 TODO

功能分析

对于大部分人来说，todo 待办都不会是一个陌生的项目，我们想象一下一个简单的待办事项需要哪些功能呢？

• 显示待办任务
• 添加任务
• 编辑任务
• 完成 / 删除任务

应该就是这些了，当然我们可以对这些功能进行拓展，但是这是后话。那么对于一个任务来说，也应该有以下必要的属性 id、名称、描述、是否完成、截止时间 ：

export interface ITask {
    
  id: number;
  name: string;
  description: string;
  isDone?: boolean;
  deadline: Date;
}

今日目标

我们今天先完成列表展示 Task 任务的工作，主要会使用 Table 组件来开发该页面，先来看一下我们今天要完成的最终页面是什么样的，很简单是不是。

Table

组件概述

在我们开始制作之前，我们先来看一下 table 组件是如何使用的，以一个小例子来解释一下：

<nz-table #basicTable [nzData]="dataSet">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of basicTable.data">
      <td>{
    {data.name}}</td>
      <td>{
    {data.age}}</td>
      <td>{
    {data.address}}</td>
      <td>
        <a>Action 一 {
    {data.name}}</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a>Delete</a>
      </td>
    </tr>
  </tbody>
</nz-table>