Question

我有两个文本框。一种是分类。另一个是类别值。文本框1为下拉列表，文本框2为自动完成。

我的阵列

[{"name":"A", "value":1},
{"name":"A", "value":2},
{"name":"A", "value":3},
{"name":"B", "value":4},
{"name":"B", "value":5},
{"name":"B", "value":6}]

代码

 <select [(ngModel)]="lName" name="Lname" (ngModelChange)="onChange($event)" name="name">
                      <option value="A">A</option>
                      <option value="B">B</option>
                    </select>
           <input   [formControl]="myControl" [matAutocomplete]="auto">
                      <mat-autocomplete #auto="matAutocomplete">
                        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
                          {{option}}
                        </mat-option>
                      </mat-autocomplete>

TS

    myControl = new FormControl();
  filteredOptions: Observable<string[]>;
  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );
  }

 onChange(value){
     var result = this.lookup_report.filter(obj => {
          if(obj.name=== value){
return obj.value;
}
        })
    }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return result.filter(option => option.toLowerCase().includes(filterValue));
  }

我的问题是，当我输入A时，我可以得到值1,2,3并且我很清楚它们。再次输入B，第二个文本框自动填充1,2,3。当我输入其他名称时，我不需要他们继续。如果我在自动完成时输入4，则显示B

的值

角材料自动完成功能不变

0 个答案: