怎么做<mat-autocomplete>点击输入时显示

Question

I use a material autocomplete form linked to a input with Angular 8

I'm new to Angular and I'm still learning. I've already tried some solution I found on stackoverflow without success ( eg: Material autocomplete not displaying list on click )

Here's my HTML page:

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

And here's my Typescript page:

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));
    }

I expect the auto-complete form to show up on input click but I need to type at least 1 character for it to show (Removing this character still show the auto-complete form)

Answer 1

Fixed, thanks to @AkberIqbal

My issue was my autocomplete was filled with an empty list before my API call returns a result.

To fix this, I assign my filteredOptions in the restApi call (At the beginning because putting it at the end didn't work):

    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);
        }
      }
    });

Again, thank you @AkberIqbal, I was working on this for too long and you helped me in no time.

Answer 2

Another aproach is to remove async function in HTML and changing the type of filteredOptions from Observable to an 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

As I had the same issue and this solution was not listed, I will post mine. For me was enough to patch the value of the input with an empty string after the data was received from the API.

in your case add

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