如何使<mat-autocomplete>在点击输入时显示

Question

我使用链接到Angular 8输入的material autocomplete表单

我是Angular的新手，还在学习。我已经尝试了一些我在stackoverflow上找到的解决方案，但没有成功(例如：Material autocomplete not displaying list on click)

这是我的HTML页面：

    <mat-form-field>
      <input
        matInput
        type="text"
        placeholder="Equipment"
        aria-label="Number"
        [formControl]="machineControl"
        [formControl]="machineFilter"
        [matAutocomplete]="auto"
        #machineinput
      />
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
          {{ option }}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>

这是我的打字页面：

export class DocumentsListComponent implements OnInit {
  machineControl = new FormControl();
  options: string[] = [];
  filteredOptions: Observable<string[]>;

  @ViewChild('machineControl', { static: true }) input: ElementRef;

 constructor(public restApi: DocumentsService) {}

  ngOnInit() {


    this.restApi.getList().then(res => {
      [...]
      for (const docs of this.Document) {
        if (this.options.some(machine => machine === docs.machine)) {
        } else {
          this.options.push(docs.machine);
        }
      }
    });

    this.filteredOptions = this.machineControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );

    private _filter(value: string): string[] {
        const filterValue = value.toLowerCase();

        return this.options.filter(option => 
        option.toLowerCase().includes(filterValue));
    }

我希望自动完成表单在输入点击时显示，但我需要键入至少1个字符才能显示(删除此字符仍显示自动完成表单)

Answer 1

修复，感谢@AkberIqbal.

我的问题是，在API调用返回结果之前，我的自动完成被一个空列表填满了。

为了解决这个问题，我在restApi调用中分配了我的filteredOptions (在开始的时候，因为把它放在最后是不起作用的)：

    this.restApi.getList().then(res => {
      this.dataSource = new MatTableDataSource(res);

      this.filteredOptions = this.machineControl.valueChanges.pipe(
        startWith(''),
        map(value => this._filter(value))
      );

      [...]

      for (const docs of this.Document) {
        if (this.options.some(machine => machine === docs.machine)) {
        } else {
          this.options.push(docs.machine);
        }
      }
    });

再次感谢你@AkberIqbal.我在这件事上花了很长时间，你很快就帮了我。

Answer 2

另一种方法是删除HTML中的异步函数，并将filteredOptions的类型从Observable更改为Array：

​

  form: FormGroup;
  code = new FormControl();
  options: Permission[];
  filteredOptions: Permission[];

  constructor(
    private dialogRef: MatDialogRef<SelectModalComponent>,
    private formBuilder: FormBuilder,
    private api: DynamicService,
  ) {
    this.form = this.formBuilder.group({
      code: [null, [Validators.required]]
    });

    this.api.getAll('/api/permission', null).subscribe((permissions: Permission[]) => {
      this.options = permissions;
      this.filteredOptions = permissions;
      console.log(this.options);
    });
  }

  ngOnInit() {
    this.code.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      ).subscribe(ret => {
        this.filteredOptions = ret;
      });
  }

  private _filter(value: any): Permission[] {
    if (this.options && typeof (value) === 'string') {
      return this.options.filter(option => option.code.toString().toLowerCase().includes(value.toLowerCase()));
    }
  }

<form [formGroup]="form" class="example-form" (ngSubmit)="submitForm()">

  <div fxLayoutAlign="center center" fxLayout="column">

    <mat-form-field class="example-full-width">
      <input type="text" placeholder="Permissões" matInput [formControl]="code" [matAutocomplete]="auto" required>

      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of filteredOptions" [value]="option.code">
          {{option.code}}
        </mat-option>
      </mat-autocomplete>

    </mat-form-field>

    <button color="primary" mat-raised-button fxAlign>Salvar</button>
  </div>


</form>

​

Answer 3

因为我有同样的问题，这个解决方案没有列出，我将发布我的解决方案。对于我来说，在从API接收数据之后，用空字符串修补输入的值就足够了。

在您的情况下，添加

this.restApi.getList().then(res => {
  [...]
  this.machineControl.pachValue('') // add this line
});