Angular实战教程-搭建清单应用Today（下）：绘制主界面左边元素

2024-02-09 05:06:13

从我们上次结束的位置开始，这一篇文章将向你讲解如何编写主界面（main）。由于这一部分的开发量比较大，知乎对于文章的长度又有限制，所以会拆成好几篇来讲。这一篇，我们介绍如何实现主界面的左边部分。

从Today List模型开始

我们还是先看看今天待办列表的数据结构吧。没接触过Angular的朋友可以先参考一下上篇博文《Angular实战教程-搭建清单应用Today（上）：模型与服务搭建》。

export class TodayListItem {
  constructor(
    public id: number,
    public name: string,
    public done: boolean = false
  ) { }
}

创建Today List模型服务

同样地，我们创建Today List模型服务（TodayListService），用于获取、修改和保存待办事项列表：

export class TodayListService {

  // 获取当前列表
  get(): Promise<TodayListItem[]> {
    //此处省略代码，此处应返回一个Promise<TodayListItem[]>，内容为待办事项列表
  }

  // 新增项目
  add(item: TodayListItem): Promise<TodayListItem> {
    //此处省略代码，此处应返回一个Promise<TodayListItem>，内容为新增的待办事项
  }

  // 删除项目
  remove(item: TodayListItem): Promise<void> {
    //此处省略代码，此处应返回一个void，删除某个待办事项
  }

  // 修改项目
  update(item: TodayListItem): Promise<TodayListItem> {
    //此处省略代码，此处应返回一个Promise<TodayListItem>，内容为修改后的待办事项
  }
}

实现Today List主界面左边部分

首先，我们新建main.component.ts：

import { Component, OnInit } from '@angular/core';
import { TodayListItem } from './today-list-item.model';
import { TodayListService } from './today-list.service';

@Component({
  selector: 'main',
  template: `<div></div>`,
  styles: []
})
export class MainComponent implements OnInit {
  constructor(private todayListService: TodayListService) {}

  ngOnInit() {
    this.todayListService.get().then(res => {
      this.list = res;
    });
  }

  list: TodayListItem[];
  newItem: TodayListItem;
}

接着，我们新建main.component.html:

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">待办事项</h3>
  </div>
  <div class="panel-body">
    <div class="form-group">
      <label for="new-item-name">添加新项目：</label>
      <input type="text" class="form-control" id="new-item-name" placeholder="输入项目名称" [(ngModel)]="newItem.name">
    </div>
    <button class="btn btn-primary" (click)="addItem()">添加</button>
  </div>
  <ul class="list-group">
    <li class="list-group-item" *ngFor="let item of list">
      <div class="checkbox">
        <label>
          <input type="checkbox" [(ngModel)]="item.done"> {{item.name}}
        </label>
      </div>
    </li>
  </ul>
</div>