Как написать ngxs асинхронную наблюдаемую интерполяцию в коде component.ts вместо HTML?

Question

В html моего приложения Angular я мог бы написать это, и оно действительно извлечет из переменной "title" и отобразит его на экране:

Ниже отлично работает из моего component.html :

<input matInput value="{{ (app$ | async).myTitle.match('title: &quot;(.*)&quot;')[1] }}" placeholder="My Title" #title>

Я хочу сделать некоторое повторное использование кода и вставить его в мой component.ts

Я попытался изменить код, переместив код в component.ts, но получил ошибку :

Итак, я попытался в моем component.ts

  getTitle(): Observable<string> {
    return this.app$.map(state => {
        return state.myTitle.match('title: &quot;(.*)&quot;')[1];
      }
    );
  }

А затем попытался упростить HTML до:

value="{{ getTitle | async }}

, но затем я получаю ошибку:

InputformComponent.html: 7 Ошибка ОШИБКИ: InvalidPipeArgument: 'function () {вернуть this.app $ .map (function (state) {вернуть состояние.everyBootstrapThemeConfig.match (' title: "(. *) "') [1];});} 'для канала' AsyncPipe 'в invalidPipeArgumentError (common.js: 4232) в AsyncPipe.push ../ node_modules/@angular/common/fesm5/common.js.AsyncPipe._selectStrategy (common.js: 4839) в AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._subscribe (common.js: 4829) в AsyncPipe.push ../ node_modules/@angular/common/fesm5/common.js.AsyncPipe.transform (common.js: 4811) в Object.eval [as updateDirectives] (InputformComponent.html: 7) в Object.debugUpdateDirectives [as updateDirectives] (core.js: 11914) в checkAndUpdateView (core.js: 11307) в callViewAction (ядро).js: 11548) в execComponentViewsAction (core.js: 11490) в checkAndUpdateView (core.js: 11313)

Возможно, мне не хватает доступа к наблюдаемому и возврата наблюдаемого поля в getTitle()

Answer 1

Вы передаете объект функции getTitle асинхронному каналу вместо его вызова getTitle().

value="{{ getTitle | async }}

вместо

value="{{ getTitle() | async }}

Вот почему сообщение об ошибкеговорит InvalidPipeArgument: function как в "данной функции является недопустимым аргументом для этого канала."