angular - Angular Observable 链接
问题描述
我所做的是:
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
现在我想要的是:在选择 ObserveA 或任何其他下拉列表时,其他下拉值应该改变例如,如果我选择
注意:下拉菜单是多选的
DropdownA values selected : 2,3
所以其他下拉列表值应该自动重置(通过重置我的意思是可用选项应该更改为其他下拉列表)
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 ??
解决方案
下面的代码怎么样?
排除.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))
}
}
独特的.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)
}
}
app.component.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])
}
app.component.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>
推荐阅读
- neural-network - 引导式 Grad-CAM 可视化,梯度加权
- python - Django - UnboundLocalError
- java - Jolt 将带有数组的对象转换为单个数组
- ms-access - 将 MS 访问权限拆分到前端和后端,但后端位于另一台计算机中
- html - 如何将 css 应用于没有选择器的 HTML 项目
- php - 使用 curl 发送分块文件并接收
- hibernate - 为什么有时我的 CrudRepository 方法会抛出 java.lang.NullPointerException 而有时不会?
- java - 从休眠 4.3 迁移到休眠 5.1.16 有 QuerySyntaxException
- c++ - 有什么方法可以中止 cin 或 scanf
- networking - 两个路由器/防火墙无法ping通