从下拉列表中按角度选择任务后，如何用所选任务刷新可观察到的内容

Question

我有一个显示任务表的组件。由于任务量可能会随着时间的推移而增长，我决定使用带自动完成功能的文本字段来代替滚动。这个想法是你：

1. 键入任务名称并选择您要查找的任务
2. 该表被刷新，现在只显示一个元素选择的任务。现在是代码：
3. 点击下拉列表中的方法，它会获取一个完整的列表，对其进行过滤，并用选定的任务覆盖可观察到的内容
4. 将刷新并显示列表

component.html

<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let task of myTasks$ | async" (click)="selectSingleTask(task.taskId)" 
[value]="task.taskId">
{{task.taskId}}
</mat-option>ł
</mat-autocomplete>

组件.ts

selectSingleTask(taskID: string) {
return this.myTasks$.subscribe(tasks => tasks.filter(task => task.taskId === taskID));
}

如何更新列表并在前面刷新？如果有什么话题我应该阅读或扩展我的知识来解决这个问题，请告诉我。

感谢

Answer 1

我通常就是这样做的：

class YourComponent {
myTasks$; // whatever is your current definition
selectedTaskId$ = new ReplaySubject<string | null>(null)
myFilteredTasks$ = combineLatest([ this.myTasks$, this.selectedTaskId$ ]).pipe(
map(([ list, selectedId ]) => !selectedId ? list : list.filter(({ id }) => id === selectedId))
)
}

在您的模板中：

<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let task of myFilteredTasks$ | async" (click)="selectedTaskId$.emit(task.taskId)" 
[value]="task.taskId">
{{task.taskId}}
</mat-option>ł
</mat-autocomplete>

这是一个粗略的例子，你可能需要添加一些share()/shareReplay()等。如果你在几个地方使用列表，一种重置值的方法，也许还有其他东西。

主要思想是：您有数据流和事件流，并将它们混合以获得具有所需属性的修改流。在这种特殊的情况下，您有所有的项目和选定的项目ID，并且您生成了一个数组流，其中包含具有该ID的单个项目(相反，使用搜索框可能更有用，或者您可以同时使用两者(。

Answer 2

有多种方法。这可能是最简单的一个：向组件添加一个新属性来存储所选任务，并在selectSingleTask函数中更新它。

组件.ts

private selectedTask$$: Subject<Task> = new BehaviorSubject<Task | undefined>(undefined);
selectedTask$ = this.selectedTask$$.asObservable(); // best practice: don't expose the subject itself
selectSingleTask(task: Task) {
return this.selectedTask$$.next(task);
}

component.html

<p>(Test output) Selected task: <pre>{{ selectedTask$ | async | json }}</pre>