向学生花名册添加功能

如果你是一位老师，而这是一个真实的班级学生管理应用，你希望你的应用具备以下功能：

• 标记学生为“缺席”或“出席”。

• 跳转到详情页查看或编辑列表中未显示的信息。

• 删除某个学生，并给出适当的警告提示。

在本章中，你将增强“花名册页面”的用户界面，实现上述所有功能。

首先，我打算在 ion-list 中每个学生项上添加一个菜单。你可以先创建菜单，也可以先创建触发菜单的按钮。这里我们先创建菜单。为此，我们将使用 ion-action-sheet。

ion-action-sheet

操作表（Action Sheet）是一种以对话框形式显示的菜单。它通常包含至少两个（通常是更多）语义相关的操作按钮。在我们的场景中，上下文是当前选中的学生。

ion-action-sheet 是 Ionic 框架特有的实现，能够自动适配 iPhone 或 Android 设备，呈现美观的视觉效果。

操作表中的按钮可以设置角色（role），包括 destructive（破坏性）或 cancel（取消）。destructive 用于表示某些不可逆的操作，常用于删除操作。在 iOS 设备上，具有 destructive 角色的按钮会以红色显示，与其他按钮区分开。

角色为 cancel 的按钮始终显示在操作表的最底部，其唯一作用是关闭操作表而不执行任何操作。

操作表中的按钮可以包含文字和图标。但它们的定义方式与普通的 ion-button 组件不同。

我们的操作表将包含以下按钮：标记学生为“出席”或“缺席”、删除学生，或取消操作。为此，需要先进行一些准备工作。

在 roster.page.ts 文件中，你需要在组件的构造函数中注入 ActionSheetController。这将使我们能够在按钮点击时创建并展示操作表。更新后的构造函数如下：

1constructor(
2  private actionSheetController: ActionSheetController,
3  private studentService: StudentsService) { }

是的，我喜欢将构造函数参数按字母顺序排列，但这并非必须。请确保从 @ionic/angular 导入 ActionSheetController。

逐步实现学生花名册功能，并点击 运行 来编译并运行更新后的应用。

现在创建一个删除学生的函数。

1async deleteStudent(student: Student) {
2   this.students = this.students
3    .filter(x => x.id !== student.id);
4}

该函数通过调用 students 数组的 filter 方法，移除传入的学生，并将过滤结果重新赋值给 students 数组。

接下来创建操作表。创建并展示操作表的函数如下所示。我们稍后会在代码片段中添加按钮数组的定义。

1async presentActionSheet(student: Student) {
2   const actionSheet = await this.actionSheetController
3   .create({
4     header: `${student.firstName} ${student.lastName}`,
5     buttons: []
6   })
7   
8   await actionSheet.present();
9}

create 方法接收一个选项对象，并返回一个 Promise，该 Promise 解析为操作表组件本身。因此必须使用 await，这意味着该函数必须标记为 async。

至少需要提供一个标题和一个按钮数组。上述代码将标题设置为传入学生的名字和姓氏的拼接。

获得操作表组件的引用后，可以通过调用其 present 方法来显示它。该方法也返回一个 Promise，因此你可能也希望等待这个调用。

继续完善选项对象，需要创建 buttons 数组。这是一个按钮对象数组。每个按钮应包含文本字段和图标字段，一个点击时触发的 handler 函数，以及可选的 role 值。对于本操作表，创建四个按钮：

1. “删除”，角色为 destructive，图标为 trash，handler 函数调用 deleteStudent。

2. “标记为出席”，图标为 eye，handler 函数将学生状态设为 present。

3. “标记为缺席”，图标为 eye-off-outline，handler 函数将学生状态设为 absent。

4. 最后是一个“取消”按钮，图标为 close，角色为 cancel，无需 handler。

以下是操作表的完整代码：

1async presentActionSheet(student: Student) {
2  const actionSheet = await this.actionSheetController
3  .create({
4    header: `${student.firstName} ${student.lastName}`,
5    buttons: [{
6      text: 'Mark Present',
7      icon: 'eye',
8      handler: () => {
9        student.status = 'present';
10      }
11    }, {
12      text: 'Mark Absent',
13      icon: 'eye-off-outline',
14      handler: () => {
15        student.status = 'absent';
16      }
17    }, {
18      text: 'Delete',
19      icon: 'trash',
20      role: 'destructive',
21      handler: () => {
22        this.deleteStudent(student);
23      }
24    }, {
25      text: 'Cancel',
26      icon: 'close',
27      role: 'cancel',
28      handler: () => {
29        console.log('Cancel clicked');
30      }
31    }]
32  });
33 
34  await actionSheet.present();
35}

现在创建一个用于触发操作表的按钮。打开花名册页面的模板文件，在现有的两个图标之后、ion-item 关闭标签之前，添加一个 ion-buttons 标签。为其设置 slot="end" 属性，表示该按钮将出现在项目末尾。然后在 ion-buttons 内添加两个 ion-button 标签。在每个按钮内部，添加一个 ion-icon，并设置 slot="icon-only"，以隐藏按钮中的文本空间。第一个按钮的名称设为 ellipsis-horizontal-outline，第二个设为 chevron-forward-outline。这些名称对应于 ionicons.com 上的图标名称。

为带有省略号的按钮添加点击事件处理程序。点击时，调用 presentActionSheet 函数，并传入当前学生对象。

暂时保留带有箭头的按钮，稍后再完成它。

完成之后，ion-buttons 组件应如下所示：

1<ion-buttons slot="end">
2  <ion-button (click)="presentActionSheet(student)">
3    <ion-icon slot="icon-only" 
4              name="ellipsis-horizontal-outline">
5    </ion-icon>
6  </ion-button>
7  <ion-button>
8    <ion-icon slot="icon-only" 
9              name="chevron-forward-outline"></ion-icon>
10  </ion-button>
11</ion-buttons>

在上述应用中完成修改后，点击 运行，查看运行结果。点击按钮，观察其外观和行为是否符合预期。前进箭头按钮目前无作用，但省略号图标应能弹出一个功能完整的操作表。

你应该能够成功标记学生为“出席”或“缺席”，并看到图标相应变化。同时也可以删除学生。

连接滑动删除按钮

在此处，还可以连接 ion-item-option 组件中的“删除”按钮。只需添加点击事件处理程序并调用 deleteStudent。

1<ion-item-option color="danger" (click)="deleteStudent(student)">Delete</ion-item-option>

ion-buttons 与图标

你可能会问：ion-buttons 标签是什么？为什么不能直接把按钮放在想要的位置？虽然按钮通常可以放置在任意位置，但当它们位于 ion-item 或 ion-toolbar 组件内部时，必须将其包裹在 ion-buttons 标签中，并通过 slot 属性指定位置，如 start 或 end，以确定按钮的显示位置。正如 Ionic 中的其他组件一样，start 通常将按钮置于父组件的左侧，end 置于右侧。对于从右向左书写的语言环境，顺序会相反。

ion-button 组件的行为符合预期，支持多种自定义方式。按钮可以仅显示文字、仅显示图标，或两者结合。按钮可以渲染为大尺寸或小尺寸，支持多种宽度和颜色。添加图标时，可通过设置 slot="start" 或 slot="end" 来决定图标在文字前还是文字后显示。若要创建无文字的按钮，只需设置 slot="icon-only"，并省略文本内容。

如前所述，所有 Ionic 图标均可在 这里 找到。

目前的应用效果如下：

测验