RXJS日期范围选择器始终等待启动和结束可观察到

Question

我有一个角度材料日期选择器，并且我正在尝试在提交查询

component.html

        <mat-form-field>
        <mat-label>Date Range</mat-label>
        <button mat-button matSuffix mat-icon-button aria-label="Clear" type="button" (click)="clearDate()">
            <mat-icon>close</mat-icon>
        </button>
        <mat-date-range-input [formGroup]="dateRangeGroup" [rangePicker]="picker">
          <input matEndDate formControlName="end" placeholder="End date">
          <input matStartDate formControlName="start" placeholder="Start date">
        </mat-date-range-input>
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-date-range-picker #picker></mat-date-range-picker>
    </mat-form-field>

component.ts

constructor(
public svcA: ServiceA,
public svcB: ServiceB,
) {

// ignore this, just for debugging
this.dateRangeGroup.controls['start'].valueChanges.pipe(filter(res => res !== null)).subscribe(val => console.log('start date', val));
this.dateRangeGroup.controls['end'].valueChanges.pipe(filter(res => res !== null)).subscribe(val => console.log('end date', val));


 combineLatest([
    this.dateRangeGroup.controls['start'].valueChanges.pipe(filter(res => res !== null)),
    this.dateRangeGroup.controls['end'].valueChanges.pipe(filter(res => res !== null))
    ])
    .subscribe(([start, end]) => {
        console.log(`combineLatest ${start} - ${end}`);
        this.svcA.sendQuery(start, end);
    },
    err => {
        console.log('error', err)
    },
    () => {
        console.log('complete');
    });

// set default date range search to 30 days
this.clearDate();

}

combineLatest之前，请获取开始日期和结束日期可观察到的可观察日期。它等待两者都首先发射事件，只是它在触发第一个事件后排放了每个单独的日期选择（选择“开始＆amp;结束日期”）。当查询通过用户选择日期提交中的一半时，这会引起不愉快的UI

体验？

Answer 1

我不确定为什么要使用FormControl的Valuechanges可观察到的内容来处理提交，而不是使用提交按钮。

无论如何，如果它是唯一可用的选项，则可以使用rxjs zip 操作员而不是操作员 combineLatestest 一个。

zip操作员每次等待，直到两个流散发值，然后将它们组合在数组中。

结合了多个可观察到的物品，以创建一个可观察的值的值
根据其每个输入的值计算得出的值
可观察。

zip([
  this.dateRangeGroup.controls['start'].valueChanges.pipe(
    filter((res) => res !== null)
  ),
  this.dateRangeGroup.controls['end'].valueChanges.pipe(
    filter((res) => res !== null)
  ),
]).subscribe(
  ([start, end]) => {
    console.log(`combineLatest ${start} - ${end}`);
    this.svcA.sendQuery(start, end);
  },
  (err) => {
    console.log('error', err);
  },
  () => {
    console.log('complete');
  }
);