增强基于 Angular 的杂货列表管理器中的项目管理：第 2 部分

介绍

在上一篇文章中，我们讨论了如何使用 Angular 构建一个杂货列表管理器，并实现了基本的添加、编辑和删除功能。在本文中，我们将继续完善项目管理功能。我们将添加以下功能：

实现多个列表的管理

为项目添加截止日期

对项目排序

添加多个列表

我们的应用程序现在只支持一个杂货列表。我们将添加支持多个列表的功能。首先，在杂货列表顶部添加一个下拉菜单，允许用户切换列表。

// grocery.component.html
<select (change)="onChangeList($event.target.value)">
  <option *ngFor="let list of lists" [value]="list">{{list}}</option>
</select>
<ul>
  <li *ngFor="let item of items" [class.completed]="item.completed">
    {{item.name}}<span [hidden]="!item.dueDate"> ({{item.dueDate | date:'MM/dd/yyyy'}})</span>
    <button (click)="onEdit(item)">编辑</button>
    <button (click)="onDelete(item)">删除</button>
  </li>
</ul>

我们还需要在 Component 类中添加以下代码：

// grocery.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-grocery',
  templateUrl: './grocery.component.html',
  styleUrls: ['./grocery.component.css']
})
export class GroceryComponent implements OnInit {
  lists: string[] = ['默认清单', '购物清单', '任务清单'];
  items: any[] = [];
  ...
  onChangeList(list: string) {
    // Load items from database based on selected list
  }
}

现在，我们能够选择多个列表，但是还没有实现加载特定列表的功能。在下一节中，我们将添加该功能。

为项目添加截止日期

现在，我们的应用程序还不支持为项目添加截止日期。要实现此功能，我们将添加一个日期选择器，并将选择的日期保存在项目对象中。

// grocery.component.html
<input type="date" [(ngModel)]="selectedItem.dueDate">
<div *ngIf="selectedItem?.dueDate">
  截止日期: {{selectedItem.dueDate | date:'MM/dd/yyyy'}}
</div>

在 Component 类中，我们还需要添加以下代码：

// grocery.component.ts
export class GroceryComponent implements OnInit {
  ...
  selectedItem: any = {};
  ...
  onEdit(item: any) {
    this.selectedItem = item;
  }
  ...
}

现在，当用户编辑项目时，日期选择器将显示，并且所选日期将保存到项目对象中。

对项目排序

我们的应用程序还不支持对项目进行排序。要实现此功能，我们将添加一个排序下拉菜单，并使用内置的 sort() 方法对项目进行排序。

// grocery.component.html
<select (change)="onSort($event.target.value)">
  <option value="">排序方式</option>
  <option value="nameAsc">名称升序</option>
  <option value="nameDesc">名称降序</option>
  <option value="dueAsc">日期升序</option>
  <option value="dueDesc">日期降序</option>
</select>

在 Component 类中，我们需要添加以下代码：

// grocery.component.ts
export class GroceryComponent implements OnInit {
  ...
  onSort(order: string) {
    switch (order) {
      case 'nameAsc':
        this.items.sort((a, b) => a.name.localeCompare(b.name));
        break;
      case 'nameDesc':
        this.items.sort((a, b) => b.name.localeCompare(a.name));
        break;
      case 'dueAsc':
        this.items.sort((a, b) => (new Date(a.dueDate)).getTime() - (new Date(b.dueDate)).getTime());
        break;
      case 'dueDesc':
        this.items.sort((a, b) => (new Date(b.dueDate)).getTime() - (new Date(a.dueDate)).getTime());
        break;
      default:
        break;
    }
  }
}

现在，当用户选择排序方式时，项目将根据所选排序方式自动排序。

总结

在本文中，我们已经实现了许多杂货列表中管理项目的功能。我们添加了支持多个列表的功能，并为项目添加了截止日期和对项目排序的功能。使用 Angular，我们能够快速而轻松地创建强大的 Web 应用程序。