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

在我的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 }}

但是然后我得到错误:



我可能会丢失如何在getTitle()中访问可观察对象并返回字段的可观察对象

最佳答案

您正在将函数对象getTitle传递到异步管道，而不是其调用getTitle()。

value="{{ getTitle | async }}

代替

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

这就是为什么错误消息将InvalidPipeArgument: function表示为“给定函数对该管道无效的参数”的原因。