Привязка свойств настраиваемого элемента (полимера) к Rx JS Observable в Angular 9 - PullRequest
Новая
       107

Привязка свойств настраиваемого элемента (полимера) к Rx JS Observable в Angular 9

0 голосов
/ 13 июля 2020

У меня есть приложение Angular 9, в котором Angular свойства компонента привязываются к наблюдаемым Rx JS. Здесь я пытаюсь заменить Angular Components пользовательским элементом Polymer (бумажный ввод).

Какое мое наблюдение? Я не могу связать свойство настраиваемого элемента с Rx JS наблюдаемые, которые я смог использовать с Angular свойствами компонента.

Как воспроизвести? Для демонстрации того, с чем я сталкиваюсь, у меня есть образец 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

Ожидается, что я могу привязать свойство label для paper-input (Polymer) к Observable и любое изменение отражается в свойстве настраиваемого элемента. На самом деле я не вижу изменений, отраженных в свойстве label, и оно пустое.

Здесь я предположил, что наблюдаемая подписка будет происходить как часть AsyncPipe с использованием во время привязки. Но этого не происходит со свойством настраиваемого элемента.

Как лучше всего добиться привязки свойств настраиваемого элемента с помощью Rx JS Observables?

С уважением, Basanth

1 Ответ

0 голосов
/ 19 июля 2020

Теперь он работает, в моем коде Angular произошла небольшая ошибка. В основном так, как я объявил и использовал наблюдаемое. У нас должен быть знак '$', используемый для обозначения его как наблюдаемой переменной.

т.е. с указанным ниже изменением он работает нормально. 

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

Я сомневался в ayn c pipe с CustomELement , но нет проблем с использованием asyn c pipe с Polymer Custom ELements.

Вы можете найти рабочий образец здесь @ https://stackblitz.com/edit/angular-examples-udy8qe

Спасибо

базант

...