代码之家 › 专栏 › 技术社区 › Akash

当BehaviorSubject发出两次真值时,使ngOnChange被激发

rxjs angular

Akash · 技术社区 · 6 年前

我正在开发Angular 5应用程序。我有一个下拉组件( 在html文件中包含以下代码, 下拉列表。组成部分html

<p-dropdown [options]="data" [(ngModel)]="selectedFilterValue" placeholder="Please Select" [style]="{width: '100%'}" (onChange)="selectedValueChanged($event)"></p-dropdown>

下拉列表。组成部分tc

export class DropdownComponent implements OnInit, OnChanges { constructor() { } @Input() ddOptions: string[] = []; @Input() filterName: string; @Input() clearDropDown: boolean = false;

我在我的父库中使用了这个下拉组件,我在其中显示了3个下拉列表,代码如下所示, 父母亲组成部分html

<div class="container"> <div class="row"> <div class="col-4"> <div class="d-flex flex-row align-items-center"> <span class="col-xs-auto">PBG:</span> <arcm-dropdown class="col" [ddOptions]="pbgFilterValues" [clearDropDown]="clearDropdownObservable | async" (filterValue)="selectedValueChanged($event,FilterName.PBG)"></arcm-dropdown> </div> </div> <div class="col-4"> <div class="d-flex flex-row align-items-center"> <span class="col-xs-auto">Wafer Size:</span> <arcm-dropdown class="col" [ddOptions]="waferSizeFilterValues" [clearDropDown]="clearDropdownObservable | async" (filterValue)="selectedValueChanged($event,FilterName.WaferSize)"></arcm-dropdown> </div> </div>

父母亲组成部分ts

clearFilters(e:any):void{ this.clearDropdownSubject.next(true); }

现在,我在父页面上有一个名为“clear filter”的按钮,点击该按钮,我将从我的BehaviorSubject中发出一个值作为true。该值由子下拉组件订阅。 问题是: 当我第一次发射时,我知道元件发射的时间与“Ngonghs”相同,但当我第一次发射时,元件发射的时间与“Ngonghs”相同。在这种情况下我该怎么办。

我想发射随机数而不是布尔数,但随机数有时可能是相同的,这将使我的“清除过滤器”按钮不起作用。

2 回复 | 直到 6 年前

Mikhail Kholodkov 6 年前

我最近也遇到了同样的问题。因此,我没有将一个基本布尔值推送到BehaviorSubject流,而是使用了一个object。例如,在代码中,定义如下接口:

export interface Clear {
  clear: Boolean;
}

然后,将父组件更改为:

clearDropdownSubject$: BehaviorSubject<Clear> = new BehaviorSubject({clear: false});
.
.
.
clearFilters(e:any):void{
    this.clearDropdownSubject.next({clear: true});
}

最后,在下拉组件中:

@Input() clearDropDown: Clear = {clear: false};

并相应地更新代码。

Akash 6 年前

我就是这样解决的直到找到更好的方法,

clearFilters(e: any): void {

    let num: number = this.getRandomNumber();
    if (num > 0 && num != this.clearDropdownSubject.getValue()) {
      this.clearDropdownSubject.next(num);
      this.filterInputList = [];
    }
    else {
      this.clearFilters(0);
    }
  }


  getRandomNumber(): number {
    let randomNumber: number = 0;
    return Math.floor(Math.random() * (100 - 1 + 1)) + 1;
  }