Angular项目TaskList service
增删改查跟ProjectService很像
import { TaskList } from './../domain'; import { HttpClient } from '@angular/common/http'; import { Inject, Injectable } from '@angular/core'; import { count, map, mapTo, mergeMap, switchMap } from 'rxjs/operators'; import { from, Observable } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class TaskListService { private readonly domain = 'TaskLists'; private headers = new Headers({ 'Content-type': 'application/json' }); constructor(private httpClient: HttpClient, @Inject('BASE_CONFIG') private config: any) { } //POST add(TaskList: TaskList): Observable<TaskList> { TaskList.id = undefined; const uri = `${this.config.uri}/${this.domain}`; return this.httpClient.post(uri, JSON.stringify(TaskList)).pipe( map(res => res as TaskList) ) } //PUT/patch update(TaskList: TaskList): Observable<TaskList> { const uri = `${this.config.uri}/${this.domain}/${TaskList.id}`; const toUpdate = { name: TaskList.name //只更新name } return this.httpClient.patch(uri, JSON.stringify(toUpdate)).pipe( map(res => res as TaskList) ) } //DELETE delete(taskList: TaskList): Observable<TaskList> { const uri = `${this.config.uri}/${this.domain}/${taskList.id}`; return this.httpClient.delete(uri).pipe( mapTo(taskList) ) } //GET get(projectId: string): Observable<TaskList[]> { const uri = `${this.config.uri}/${this.domain}`; return this.httpClient. get(uri, { params: { 'projectId': projectId } }) .pipe( map(res => res as TaskList[]) ) } }
需要添加一个存储TaskList顺序,通过拖拽交换2个List的顺序。通过Patch更新Order。
也就是要监听两个流merge和concat都行,一个事件流更新drag order,一个事件流更新drop order。
希望这两个流先后更新之后再把得到的task list流返回,做一个reduce操作。
//拖拽交换两个List顺序 swapOrder(src: TaskList, target: TaskList): Observable<TaskList[]> { //拖拽的原始uri const dragUri = `${this.config.uri}/${this.domain}/${src.id}`; const dropUri = `${this.config.uri}/${this.domain}/${src.id}`; const drag$ = this.httpClient .patch(dragUri, JSON.stringify({ order: target.order }), { headers: this.headers }) .pipe(map(res => res as TaskList)); const drop$ = this.httpClient .patch(dragUri, JSON.stringify({ order: src.order }), { headers: this.headers }) .pipe(map(res => res as TaskList)); return concat(drag$, drop$) .pipe(reduce((r: TaskList[], list) => [...r, list], [])); }
如果觉得本文对您有帮助~可以
微信支持一下:
分类:
Angular
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 字符编码:从基础到乱码解决
2017-02-24 处理跨域方式
2017-02-24 用jQuery实现Ajax
2016-02-24 css3常用动画+动画库