Автозаполнение углового материала - открыть панель после ENTER - PullRequest
Новая
       7

Автозаполнение углового материала - открыть панель после ENTER

0 голосов
/ 11 мая 2018

У меня есть поле автозаполнения, которое извлекает данные из базы данных, когда я нажимаю клавишу ВВОД.Но панель открывается только при вводе дополнительных символов ... Что я должен изменить / добавить, чтобы открыть панель при загрузке данных?Вот мой компонент HTML: 

<mat-form-field class="index-full-width">
                        <input
                          matInput
                          type="text"
                          [(ngModel)]="patientChoice"
                          placeholder="Patient"
                          aria-label="Patient"
                          [matAutocomplete]="autoPatient"
                          [formControl]="myControl"
                          (keyup.enter)="getPatients($event)"
                        >
                        <mat-autocomplete (optionSelected)="selectPat()" #autoPatient="matAutocomplete" [displayWith]="displayFnPat">
                          <mat-option *ngFor="let patient of filteredPatients | async" [value]="patient">
                            <span>{{ patient.lastName }}</span>
                            <small>{{patient.firstName}}</small> |
                            <span>né(e) le {{ patient.dateNaissance }}</span> |
                            <small>IPP: {{patient.ipp}}</small>
                          </mat-option>
                        </mat-autocomplete>
                      </mat-form-field>

Файл компонента TS: 

  getPatients(event: any) {
    let searchTerm = '';
    searchTerm += event.target.value;
    console.log(searchTerm);
    let success: any = {};
    this.klinckServices.getPatients(searchTerm)
      .then((webScriptdata) => {
          success = webScriptdata;
          this.listPatients = success.data.items;
          console.log(this.listPatients);
          this.isResult = true;
          console.log(this.autoCompleteInputAutoPatient);
          // this.autoCompleteInputAutoPatient.openPanel();
        },
        msg => {
          alert(msg);
        });
  }

В документации по угловым материалам показаны различные функции и свойства, такие как showPanel или isOpen, но я не понимаю, как его использовать: https://material.angular.io/components/autocomplete/api

ОБНОВЛЕНИЕ: после прочтения этого поста Как вы называете closePanel в угловом материале 4 автозаполнения Я обновил свой HTML-компонент следующим образом: 

<mat-form-field class="index-full-width">
                        <input #autoCompletePatientInput
                          matInput
                          type="text"
                          [(ngModel)]="patientChoice"
                          placeholder="Patient"
                          aria-label="Patient"
                          [matAutocomplete]="autoPatient"
                          [formControl]="myControl"
                          (keyup.enter)="getPatients($event)"
                        >
                        <mat-autocomplete #autoCompletePatient (optionSelected)="selectPat()" #autoPatient="matAutocomplete" [displayWith]="displayFnPat">
                          <mat-option *ngFor="let patient of filteredPatients | async" [value]="patient">
                            <span>{{ patient.lastName }}</span>
                            <small>{{patient.firstName}}</small> |
                            <span>né(e) le {{ patient.dateNaissance }}</span> |
                            <small>IPP: {{patient.ipp}}</small>
                          </mat-option>
                        </mat-autocomplete>
                      </mat-form-field>

И вот что я добавил в TS Component: 

 @ViewChild('autoCompletePatientInput', { read: MatAutocompleteTrigger} ) autoCompletePatient: MatAutocompleteTrigger;
...
  getPatients(event: any) {
    console.log(this.autoCompletePatient);
    this.autoCompletePatient.openPanel();
    let searchTerm = '';
    searchTerm += event.target.value;
    console.log(searchTerm);
    let success: any = {};
    this.klinckServices.getPatients(searchTerm)
      .then((webScriptdata) => {
          success = webScriptdata;
          this.listPatients = success.data.items;
          console.log(this.listPatients);
          this.isResult = true;
        },
        msg => {
          alert(msg);
        });
  }

но ничего не меняется

...