Как предварительно выбрать автозаполнение? - PullRequest
Новая
       6

Как предварительно выбрать автозаполнение?

0 голосов
/ 24 августа 2018

Мне нужна опция для предварительного выбора автозаполнения со значением, но я все еще могу изменить автозаполнение впоследствии. Это возможно? Я уже пытался использовать атрибут value в элементе input, но это не работает.

userlist.component.html 

<mat-form-field>
    <input type="text" placeholder="Name" aria-label="Name" matInput [formControl]="myControl" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" (optionSelected)="output($event.option.value)">
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
                {{option.display_name}}
            </mat-option>
        </mat-autocomplete>
</mat-form-field>

userlist.component.ts 

export class AutoUserlistComponent implements OnInit {

    myControl = new FormControl();
    options;
    filteredOptions: Observable<any[]>;
    @Output() change = new EventEmitter<any>();

    constructor(
        private loaderService: LoaderService
    ) { }

    ngOnInit() {
        this.options = this.loaderService.getUser();
        this.filteredOptions = this.myControl.valueChanges
        .pipe(
            startWith(''),
            map(name => name ? this._filter(name) : this.options.slice())
        );
    }

    displayFn(user): string | undefined {
            return user ? user.first_name + ' ' + user.last_name  : undefined;
    }

    private _filter(name: string) {
        return this.options.filter(user => {
            const searchStr = user.display_name.toLowerCase() + user.ad_login.toLowerCase();
            return searchStr.indexOf(name.toLowerCase()) !== -1;
        });
    }

    output(user) {
        this.change.emit(user);
    }
}

1 Ответ

0 голосов
/ 24 августа 2018

У меня есть рабочий образец для вас.

Компонент: 

  private _filter(value: any): Pair[] {
      if (typeof value == 'string') {
      const filterValue = value.toLowerCase();
      return this.options.filter(option => option.name.toLowerCase().includes(filterValue));
    } else {
       return this.options;
    }
  }

шаблон: 

    <form class="example-form">
      <mat-form-field class="example-full-width">
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="addpair($event)" [displayWith]="returnfn">
          <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
            {{ option.name }}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </form>

Надеюсь, код поможет вам!

...