Question

我使用链接到Angular 8输入的物料自动完成表格

我是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>

这是我的Typescript页面：

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调用中分配了我的filterOptions（在开始时是因为在末尾将其不起作用）：

    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中的异步函数，并将filterOptions的类型从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
});

单击输入时如何显示<mat-autocomplete>

3 个答案: