如何根据另一个自动完成字段的选定值初始化自动完成选项

Question

我有2个垫自动完成输入字段。您可以选择一个数据库表的名称。另一个允许您选择该数据库表的一列。因为首先没有选择任何内容，所以列输入字段的选项列表应基于第一个自动完成字段的选定值。但是，当我选择表格时，列字段仍为空。

我尝试使用changeDetector刷新所有内容，但无济于事。我已经订阅了表格字段formcontrol的valueChanges。在该订阅期间，我为所选表格的列设置了选项，但它们不显示。

mat-autocomplete字段基于material.angular.io网站https://material.angular.io/components/autocomplete/overview上的示例（第三个示例），此处为代码：

<mat-form-field class="example-full-width">
                            <input type="text" placeholder="Choose table" matInput formControlName="tableNames" [matAutocomplete]="auto">
                            <mat-autocomplete #auto="matAutocomplete">
                              <mat-option (click)="initializeAndEnableColumnNamePicker()" *ngFor="let option of filteredTableNameOptions | async" [value]="option">
                                {{option}}
                              </mat-option>
                            </mat-autocomplete>
                          </mat-form-field>

                          <mat-form-field class="example-full-width">
                            <input type="text"
                                   placeholder="Choose column" matInput formControlName="columnNames" [matAutocomplete]="auto1">
                            <mat-autocomplete #auto1="matAutocomplete">
                              <mat-option *ngFor="let option of filteredColumnNameOptions | async" [value]="option">
                                {{option}}
                              </mat-option>
                            </mat-autocomplete>
                          </mat-form-field>

以下是相关的后端方法： ngOnInit

  ngOnInit() {
      this.databaseService.getDatabaseById(this.databaseId).subscribe(result => {
        this.fullDatabase = result;
        this.tableOptions = new Array<string>();
        this.columnOptions = new Array<string>();
        if(this.fullDatabase.augmentedTableDTOS && this.fullDatabase.augmentedTableDTOS.length > 0)
          this.hasTables = true;
        this.fullDatabase.augmentedTableDTOS.forEach(augmentedTableDTO => {
          this.tableOptions.push(augmentedTableDTO.name);
          this.detectedTables.data.push(augmentedTableDTO);
        });
        this.detectedTables.data.sort((name1, name2) => {
          if(name1.name > name2.name){
            return 1;
          }
          if(name1.name < name2.name){
            return -1;
          }
          return 0;
        });
      });

    this.filteredColumnNameOptions = this.tableAndColumnForm.controls["columnNames"].valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value,false))
      );

    this.filteredTableNameOptions = this.tableAndColumnForm.controls["tableNames"].valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value,true))
      );

  }

构造函数：

  constructor(private formBuilder: FormBuilder,
              private databaseService: DatabaseService,
              private dialog: MatDialog) {
    this.tableAndColumnForm = formBuilder.group({
      tableNames:[],
      columnNames:[],
      columnValue:null
    });
    this.tableAndColumnForm.controls["tableNames"].valueChanges.subscribe(value => {
      console.log("change detected")
      let tableDTO: TableDTO = this.detectedTables.data
        .find(tableDTO => tableDTO.name === this.tableAndColumnForm.controls["tableNames"].value);
      if(tableDTO) {
        tableDTO.columnNames.forEach(name =>
        {this.columnOptions.push(name)});
        console.log(this.columnOptions);
        this.enableColumnNamePicker = true;
      }
    });
  }

过滤方法：

  private _filter(value: string, isTable:boolean): string[]{
    const filterValue = value.toLowerCase();
    if(isTable)
      return this.tableOptions.filter(option => option.toLowerCase().includes(filterValue));
    else {
      this.initializeAndEnableColumnNamePicker();
      this.columnOptions.filter(option => option.toLowerCase().includes(filterValue));
    }
  }
`````````````````````````````````````````````````````
AugmentedTableDTO

`````````````````````````````````````````````````````

export class TableDTO {
  constructor(public id?:number, public name?:string, public columnNames?:string[], public detectedInfractions?:number[], public primaryKeyColumn?:string){}
}

预期结果是表输入的值选择导致第二次自动完成中列选择选项的填充。

实际结果是，在表选择中没有出现列，但我已经看到columnOptions正在填充相应的列值

谢谢