角度可观察链

本文介绍了角度可观察链的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我所做的是:

A B C D E F ---------------------- 2 4 6 2 5 7 3 3 6 0 6 8 3 6 5 1 6 8 5 0 1 1 1 5 1 2 2 0 1 5 WHY I AM Subscribing B to A , C-> B , because on change of A , B will change and on change of B -> C will change (its like excel) where there are formulas on each field and change of each field other field will change ObservableB[i] = ObervableA[i]; ObservableC[i] = ObservableB[i].pipe(); ObservableD[i] = obbservableC[i].pipe( Map(res => res +1) ); ObservableE[i] = ObservableD[i].pipe(); ObservableF[i] = ObservableE[i].pipe();

还有

ObserveB = dropdown Observable ObserveC = dropdown Observable ObserveD = Dropdown Observable ObserveE = Drop down Observable ObserveF = dropdown Observable Now: ObserveA = ObservableA.pipe( map(val => { //map only unique values of ObservableA to ObserveA } ) );

类似地，对于ObserveB，ObserveC，ObserveD，ObserveE，ObserveF

Similarly for ObserveB, ObserveC , ObserveD , ObserveE , ObserveF

现在我想要的是: 在选择ObserveA或任何其他下拉列表时，其他下拉值应更改 例如，如果我选择

Now what I want is : On selection of ObserveA, or any other dropdown , other drop down values should change For example if I selected

注意:下拉菜单为多选

DropdownA values selected : 2,3

因此，其他下拉菜单值应自动重置(通过重置，我的意思是其他下拉菜单的可用选项应更改为)

So other dropdown values automatically should be reset ( by reset I mean available option should change for other dropdowns ) to

means for B dropdown available options should be : 4,3,6

ObserveC = 6,5 (only unique values in drop down) ObserveD = 2,0,1 ObserveE = 5,6 (only unique values in drop down) ObserveF = 7,8 (only unique values in drop down)``` Is this is achievable ??

推荐答案

以下代码如何?

exclude.pipe.ts:

@Pipe({ name: 'exclude' }) export class ExcludePipe implements PipeTransform { transform(value: any[], ...args: any[]): any { return value.filter(x => ![].concat.apply([], args).includes(x)) } }

unique.pipe.ts:

@Pipe({ name: 'unique' }) export class UinquePipe implements PipeTransform { onlyUnique = (value, index, self) => self.indexOf(value) === index; transform(value: any[]: any { return value.filter(this.onlyUnique) } }

appponent.ts:

@Component(...) export class AppComponent { observableA = of([2, 4, 6, 2, 5, 7]) observableB = of([3, 3, 6, 0, 6, 8]) observableC = of([3, 6, 5, 1, 6, 8]) observableD = of([5, 0, 1, 1, 1, 5]) observableE = of([1, 2, 2, 0, 1, 5]) }

appponent.html:

<ng-container *ngIf="observableA | async as A"> <ng-container *ngFor="let item of A | unique"> <td> {{ item }} </td></ng-container><br> <ng-container *ngFor="let item of (observableB | async | unique | exclude :A)"> <td> {{ item }} </td></ng-container><br> <ng-container *ngIf="observableB | async as B"> <ng-container *ngFor="let item of (observableC | async | unique | exclude :A:B)"> <td> {{ item }} </td></ng-container><br> <ng-container *ngIf="observableC | async as C"> <ng-container *ngFor="let item of (observableD | async | unique | exclude :A:B:C)"><td> {{ item }} </td></ng-container><br> <ng-container *ngIf="observableD | async as D"> <ng-container *ngFor="let item of (observableE | async | unique | exclude : A:B:C:D)"><td> {{ item }} </td></ng-container><br> </ng-container> </ng-container> </ng-container> </ng-container>