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，该私有.replace()始终包含最新的便笺值。

赞： 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...
}

然后您需要在组件中做的就是声明您可观察的内容，例如

notesData = this. _noteService.getNotes();

在init内部，只需向API请求以获取注释，它将自动更新notesData，该async应该通过concatMap管道输出在模板上进行订阅。

保存所有您需要做的只是在末尾添加一个this._noteService.addNote(note).pipe( concatMap(() => this._noteService.getNotesFromApi())) .subscribe();，以便首先保存，然后从api请求更新。

类似

Df <- data.frame(Value1 = c(13,19,56,47,15,13,64, 48), Value2 = c(54,64,11,21,15,48,12,78), Value3 = c(66,78,05,12,21,23,45,30))

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

我希望您了解这种流程的工作原理，如果不愿意的话也可以问。

希望这会有所帮助！

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

1 个答案: