Question

Angular 6异步autocomplete无法正常工作，但它显示的项目没有更改值，并且不会减少建议值的列表

component.ts：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators,FormControl} from '@angular/forms'
import { Observable } from 'rxjs';
import { startWith, map } from 'rxjs/operators';

export class AjouterMarcheComponent implements OnInit {
    createForm: FormGroup;
    myControl : FormControl;
    directions: string[] = ['DGI','SSI','TTU','BLI'];
    filteredDirections: Observable<string[]>;

    constructor(private fb: FormBuilder) {
        this.createForm = this.fb.group({
            NomDirection: ['', Validators.required]})
            this.myControl= new FormControl();
        });
    }
    ngOnInit() {
        this.filteredDirections = this.myControl.valueChanges.pipe(
            startWith(''),
            map(value => this._filter(value))
        );
    }
    private _filter(value: string): string[] {
        const filterValue = value.toLowerCase(); //miniscule
        return this.directions.filter(direction => `direction.toLowerCase().indexOf(filterValue) === 0);
    }
}

感谢您的帮助

Answer 1

Compoment.html

compoment.html

<div>
<br>
<mat-card>
<br>
<form [formGroup]="createForm" class="create-form" >
        <mat-form-field class="field-full-width">
           <input placeholder="Choisir ou ajouter une direction" type="text" aria-label="Number" [formControl]="myControl" matInput  [matAutocomplete]="auto" #NomDirection>
           <mat-autocomplete #auto="matAutocomplete">
             <mat-option *ngFor="let option of options" [value]="option">
               {{ option }}
             </mat-option>
           </mat-autocomplete>
         </mat-form-field>
       </form>
     </mat-card>
   </div>

Angular 6异步自动完成功能无法正常工作，但它显示的项目没有更改值

1 个答案: