Обновить текстовое поле после изменения в хранилище NGRX - Двухстороннее связывание

Question

Я использую Angular 6 с NGRX. Я обновил значение поля в своем хранилище NGRX в редукторе, и это прекрасно работает. Как создать двухстороннее связывание, чтобы поле ввода текстового поля из формы в пользовательском интерфейсе также обновлялось на основе этого свойства в хранилище. Я хочу иметь двухстороннюю привязку между моим хранилищем NGRX и полем ввода формы?

Answer 1

Вы можете подписаться на свойство магазина в вашем компоненте, используя @select decorator.

Примерно так:

@select([YOUR_REDUCER, 'property']) private propertyObs$: Observable<type>;

И в вашем шаблоне вы можете подписаться на propertyObs с помощью AsyncPipe.

Больше информации об AsyncPipe: https://blog.angular -university.io / angular-реактивный-шаблоны .

Селекторы NgRx: https://toddmotto.com/ngrx-store-understanding-state-selectors