用途:这是「Day 2 · Step 3」的培训步骤,目标是在 up-app 中构建搜索/列表页,并实现内联删除的完整 CRUD 操作。
主要能力:
- 通过实体服务加载全部记录,并用 Angular signal 存储列表。
- 页头栏提供 Add 按钮,跳转到新建页面。
- 每行提供 Edit 与 Delete 按钮,Delete 会弹出确认框,确认后调用删除服务并更新列表。
- 配置搜索页与表单页所需的路由。
使用方式(按资料): 目标文件为 up-app/src/app/pages/<entity>-search/<entity>-search.component.ts(standalone 组件)。 使用 signal<Entity[]>([]) 存储条目列表;数据获取后调用 .set() 更新。初始化时调用 <entity>Service.getAll() 并 this.items.set(data) 更新 signal。页头栏的 Add 按钮 → router.navigate(['/<entity>/new'])。每行使用 @for 与 track item.id:Edit 按钮 → router.navigate(['/<entity>', item.id, 'edit']);Delete 按钮 → 显示确认弹窗,确认后调用 <entity>Service.delete(id),成功时用 .set() 更新 signal。 路由表(app.routes.ts)需新增表单页使用的路由: { path: '<entity>', component: <Entity>SearchComponent } { path: '<entity>/new', component: <Entity>FormComponent } { path: '<entity>/:id/edit', component: <Entity>FormComponent } 组件 TypeScript(signal 模式)与模板(含 @for 控制流)的代码见资料原文,包含 import { signal }、items signal、constructor 注入 Router 与 <Entity>Service、ngOnInit 订阅 getAll 后 set、onEdit 导航、onDelete 确认后删除并过滤当前列表,以及表格模板与 Add/Edit/Delete 按钮。 重新部署(从项目根目录):docker compose up -d --build 验证:搜索页加载真实 up-api 数据,行上具有 Add/Edit/Delete 按钮;点击 Delete → 确认弹窗 → 该行从表格中移除。
适用场景:需要为实体快速生成带列表、新增、编辑、删除入口的搜索/列表页,并按给定路由规则接入表单页的前端开发场景。
限制:资料仅给出该步骤的代码与验证方式,未提供依赖版本、样式框架说明、错误处理细节、权限控制或性能优化等内容,这些内容暂未提供。