自定义元素（聚合物）属性绑定到RxJS，可在Angular 9中观察到

Question

我有一个Angular 9应用程序，其中Angular Component属性绑定到RxJS观测值。在这里，我试图用聚合物自定义元素（纸张输入）替换角度组件。

我的观察是什么？我无法将自定义元素属性与RxJS可观察对象绑定，而我可以将其与Angular Component属性绑定。

如何繁殖？为了显示我所面临的我有stackblitz样本与自定义元素（纸张输入）绑定到一个可观察的。

app.component.html

<paper-input [label]="price$ | async" ></paper-input>

app.component.ts

import { Observable } from 'rxjs';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent  {
  price: Observable<string>;
  
  constructor() {
      this.price = Observable.of("230$");
  }
}

完整代码：https://stackblitz.com/edit/angular-examples-mu72vs

我的期望是，我能够将纸张输入（聚合物）的标签属性绑定到可观察的，并且当有任何更改反映到自定义元素属性时。实际上，我没有看到标签属性所反映的更改，它是空的。

在这里，我假设可观察到的订阅将作为绑定时使用的AsyncPipe的一部分发生。但这种情况不会发生在自定义元素属性上。

用RxJS可观察性实现自定义元素属性绑定的最佳方法是什么？

问候巴桑

Answer 1

现在它工作了，我的角度代码有一个小错误。基本上是我声明和使用可观察的方法。我们应该使用“$”符号来表示它是一个可观察的变量。

i、 e.通过以下更改，工作正常。

export class AppComponent  {
  price$: Observable<string>;
  
  constructor() {
      this.price$ = Observable.of("230$");
  }
}

我怀疑aync管与自定义ELements，但使用异步管与聚合物自定义ELements没有问题。

您可以在这里找到工作样本@https://stackblitz.com/edit/angular-examples-udy8qe

谢谢

巴桑