Question

我有两个mat-autocomplete，当我从第一个中选择一个选项时，第二个将根据第一个mat-autocomplete选项加载。从第二个垫自动完成选项中选择一个选项后，如果仅通过删除文本来清除第一个垫，则（optionSelected）不会继续进行，因此不会清除第二个垫选项。当用户从第一张垫子上手动删除（文本）选项时，我很难解决如何创建事件来清除第二张垫子自动完成选项的事情。

HTML

<mat-form-field class="form-element">
  <input type="text" matInput placeholder="Locación" formControlName="locacion" [matAutocomplete]="locacion">
  <mat-error *ngIf="!formGroup.controls['locacion'].valid">
    {{ titleAlert }}
  </mat-error>
  <mat-autocomplete autoActiveFirstOption #locacion="matAutocomplete" [displayWith]="displayLocacion" (optionSelected)="cargarRutas()">
    <mat-option *ngFor="let locacion of locaciones | async" [value]="locacion">
      {{locacion.nombre}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>
<mat-form-field class="form-element">
  <input type="text" matInput placeholder="Ruta" formControlName="ruta" [matAutocomplete]="ruta">
  <mat-error *ngIf="!formGroup.controls['ruta'].valid">
    {{ titleAlert }}
  </mat-error>
  <mat-autocomplete autoActiveFirstOption #ruta="matAutocomplete" [displayWith]="displayRuta">
    <mat-option *ngFor="let ruta of rutas | async" [value]="ruta">
      {{ruta.nombre}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

TS

  async cargarRutas() {
    if (this.formGroup.controls['locacion'].valid) {
      this.cargaRutas = await this.rutaService.getRutasLocacion(this.formGroup.get('locacion').value.id)
    }
  }

Answer 1

通过更改valueChanges的值，您可以使用发出的FormControl

this.subscription = this.formGroup.get('locacion').valueChanges.subscribe(value => { 
  if (!!value.id) {
     this.cargaRutas = await this.rutaService.getRutasLocacion(value.id)
  } else {
     this.cargaRutas = [];
  }
});

在if条件下，您甚至可以放typeof value === 'object';不要忘记，您必须取消订阅所有尚未完成的可观察对象。因此，实现OnDestroy接口并

ngOnDestroy(): void {
   this.subscription.unsubscribe();
}

删除输入文本时无法清除垫自动完成选择的选项

1 个答案: