Привязка данных внутри rxjs наблюдаемой - PullRequest
Новая
       6

Привязка данных внутри rxjs наблюдаемой

0 голосов
/ 06 декабря 2018

Возможно ли связать данные внутри наблюдаемой и поддерживать данные в обоих направлениях?

Например: у меня есть какое-то диалоговое окно, где пользователь может вводить какие-то данные.А раскладка диалога загружается из конфигурации и находится внутри наблюдаемой.Конфигурация содержит поля ввода, которые будут показаны.
Поэтому я попытался использовать async трубу внутри моего диалогового шаблона.Рендеринг полей работает как шарм, но я попытался привязать данные к значениям внутри наблюдаемого, а также.Каждый раз, когда я закрываю и открываю диалоговое окно, я получаю новую наблюдаемую и теряю свои данные.

Чтобы не потерять данные, я подписываюсь на наблюдаемую в моем сервисе и записываю ее в объект данных: 

export class DataService implements OnInit {
  private data: any = {};
  ngOnInit() {
  this.http.get(path).subscribe((myData) => {
    this.data.data = myData;
  }
}

//other code ...

//opening the dialog this way
const dialogRef = this.dialog.open(MyDialogComponent, {
  width: '1200px',
  data: this.dataService.getData()
});

//Using data in the dialog template
<div *ngIf="data.data as myField; else loading">
  <mat-form-field>
    <input #inputText matInput 
      placeholder="{{ myField.name }}" 
      [(ngModel)]="myField.value" 
      name="{{ myField.name }}" 
      matTooltip="{{myField.description}}" 
      [required]="myField.required">
  </mat-form-field>
</div>
<ng-template #loading>
  <mat-spinner mode="indeterminate" diameter="30"></mat-spinner>
</ng-template>

Я также мог бы отделить данные от моей модели, но это усложнило бы обработку.

Есть ли другие варианты для обработки требований?Какова будет лучшая практика?

Ответы [ 2 ]

0 голосов
/ 06 декабря 2018

Использование shareReplay (1) является более чистым решением и получает его значение, используя async pipe, он действует как BehaviourSubject.

export class DataService implements OnInit {
  private data: any = {};
  ngOnInit() {
  this.data.data=this.http.get(path).pipe(shareReplay(1))
}

//other code ...

//opening the dialog this way
const dialogRef = this.dialog.open(MyDialogComponent, {
  width: '1200px',
  data: this.dataService.getData()
});

<div *ngIf="(data.data | async) as myField; else loading">
  <mat-form-field>
    <input #inputText matInput 
      placeholder="{{ myField.name }}" 
      [(ngModel)]="myField.value" 
      name="{{ myField.name }}" 
      matTooltip="{{myField.description}}" 
      [required]="myField.required">
  </mat-form-field>
</div>
<ng-template #loading>
  <mat-spinner mode="indeterminate" diameter="30"></mat-spinner>
</ng-template>
0 голосов
/ 06 декабря 2018

Думали ли вы о повторной трансляции в ReplaySubject? 

export class DataService implements OnInit {
private data = new ReplaySubject<any>;
ngOnInit() {
this.http.get(path).subscribe((myData) => {
     this.data.next(myData);
    }
}

public getMyData()    {
     return Observable.of(this.myData);
 }
...