Блог

Я нахожусь в довольно затруднительном положении, и это мог бы быть подход, который я использовал, изучая RxJS и наблюдаемые.

Предисловие

Наше приложение использует Angular для подключения к нашему общедоступному уровню API (C #). Тип объекта, который возвращается из моего АСИНХРОННОГО вызова, имеет Observable< ListResultDtoOfNoteDto >. Этот поток передается дочернему компоненту, который перебирает элементы. Этот же поток также позволяет пользователю добавлять новые заметки типа 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>
  

[примечания.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() в подписке при добавлении новой заметки.

(При необходимости я могу предоставить более подробную информацию!)

РЕДАКТИРОВАТЬ: Забыл показать метод сохранения в данный момент

Один из способов, которым вы можете достичь этого, — иметь частный BehaviorSubject внутри вашего NoteServiceServiceProxy , который всегда будет содержать последнее значение notes.

Нравится: 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 в конце, чтобы сначала сохранить, а затем запросить обновление из вашего api.

Итак, что-то вроде

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

Это снова обновит вашу переменную notesData, которая находится в шаблоне.

Я надеюсь, вы понимаете, как работает этот поток, и если нет, не стесняйтесь спрашивать.

Надеюсь, это поможет!