使用 ASYNC 管道和返回的 Observable<{}> 更新 UI

Question

我很困惑，这可能是我在学习 rxJS 和 Observables 时一直采用的方法。

前言

我们的应用程序使用 Angular 连接到我们的公共 API 层 (C#)。从我的 ASYNC 调用返回的对象类型是 Observable。该流被传递给循环遍历项目的子组件。同样的流还允许用户添加 NoteDto 类型的新笔记或编辑笔记。理想情况下，当这些操作完成后，便笺列表将反映更新后的更改，而无需再次调用相同的服务调用来获取便笺。

代码

[notes.component.html]

<div *ngIf="(notes$ | async)?.items as notes; else loading">
    <note-card [noteData]="notes" (noteClick)="editNote($event)"></note-card>
</div>
<ng-template #loading>
    <div class="notes__container">
        <div class="note-card">
            <div class="note-card__primary-action">
                <div class="note-card__head">
                    <h2 class="note-card__title note-card-typography--headline1 text-center">Loading...</h2>
                </div>
            </div>
        </div>
    </div>
</ng-template>

[notes.component.ts]

import ...

@Component({
    ...
})
export class NotesComponent extends AppComponentBase implements OnInit {
    constructor(
        ...
        private _noteService: NoteServiceServiceProxy
    ) {
        super(injector);
    }

    public notes$: Observable<ListResultDtoOfNoteDto>;
    public userId: number;
    ...

    ngOnInit() {
        ...
        this.getNotes();
        ...
    }

    getNotes(): void {
        /*
            Binding to ASYNC pipe; which doesn't need a subscription since it is automatic?
            Returns type: Observable<ListResultDtoOfNoteDto> which is an array of NoteDto
        */
        this.notes$ = this._noteService.getUserNotes(this.userId, null);
        ...
    }
    ...

    public saveNote(note: NoteDto, mode: string) {
        if (mode === 'new') {
            this._noteService.addNote(note).subscribe(() => {
                this.cleanUp();
                this.getNotes();
                this.notify.info(this.l('SavedNoteSuccessfully'));
            });
        } 
        ...
    }
}

在子级中减去 clickEvent 的所有功能都发生在父级中。它会加载一个表单（反应式表单方法），该表单可以记录新笔记并保存或编辑旧笔记以进行更新。

我的问题

我只是想要一种方法来保存笔记并更新列表，而无需在添加新笔记时在订阅中再次调用 this.getNotes()。

（如果需要，我可以提供更多详细信息！）

编辑：目前忘记显示保存方法

Answer 1

实现此目的的一种方法是在您的 NoteServiceServiceProxy 内部拥有一个私有 BehaviorSubject，它将始终包含最新的注释值。

喜欢： private _notes = new BehaviorSubject<ListResultDtoOfNoteDto>(null)

• 并且您公开了一个仅供消费者订阅的功能。
• 您的 API 调用只会使用响应更新主题

public getNotes(): Observable<ListResultDtoOfNoteDto> {
    return this._notes.asObservable();
}

public getNotesFromApi(args): {
    // Api request
    this.httpClient.get().pipe(tap(result) => this._notes.next(result))
    // etc...
}

那么你需要在你的组件中做的就是声明你的 observable 类似

notesData = this. _noteService.getNotes();

在init 内只需向API 发出请求以获取注释，它会自动更新您的notesData，这应该通过async 管道输出订阅您的模板。

当您保存时，您只需在末尾添加一个concatMap，以便您的保存首先进行，然后您从您的 api 请求更新。

类似

    this._noteService.addNote(note).pipe(
        concatMap(() => this._noteService.getNotesFromApi()))
        .subscribe();

这将再次更新模板上的 notesData 变量。

我希望您了解此流程的工作原理，如果没有，请随时提问。

希望这会有所帮助！