javascript - 如何在 component.ts 代码而不是 html 中编写 ngxs 异步可观察插值？

Question

在我的 Angular 应用程序的 html 中，我可以这样写，它确实会从变量中提取“标题”并将其显示在屏幕上:

以下在我的 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 ERROR Error: InvalidPipeArgument: 'function () { return this.app$.map(function (state) { return state.everyBootstrapThemeConfig.match('title: "(.*)"')[1]; }); }' for pipe 'AsyncPipe' at invalidPipeArgumentError (common.js:4232) at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._selectStrategy (common.js:4839) at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._subscribe (common.js:4829) at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe.transform (common.js:4811) at Object.eval [as updateDirectives] (InputformComponent.html:7) at Object.debugUpdateDirectives [as updateDirectives] (core.js:11914) at checkAndUpdateView (core.js:11307) at callViewAction (core.js:11548) at execComponentViewsAction (core.js:11490) at checkAndUpdateView (core.js:11313)

我可能遗漏了如何访问可观察对象并返回 getTitle() 中字段的可观察对象

Answer 1

您将函数对象 getTitle 传递给异步管道，而不是调用它 getTitle()。

value="{{ getTitle | async }}

代替

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

这就是错误消息显示 InvalidPipeArgument: function 的原因，如“给定的函数是此管道的无效参数。”