Не удается повторно включить панель автозаполнения материала после ее отключения - PullRequest
Новая
       6

Не удается повторно включить панель автозаполнения материала после ее отключения

0 голосов
/ 28 ноября 2018

Я думаю, что нашел ошибку в mat-autocomplete (или не понимаю, как она работает), но сначала я хочу запустить ее всеми вами.

В TS я нажимаю на поток данных дляотфильтрованный список, если список больше 6, я не хочу показывать панель автозаполнения.

Существует @Input с именем AutocompleteDisabled, который принимает boolean в соответствии с документами :

Отключено ли автозаполнение.Когда этот параметр отключен, элемент будет действовать как обычный ввод, и пользователь не сможет открыть панель.

Я пытался подписаться на HTML, но результат не изменился.Я даже попытался установить флажок, который перевернул значение с true на false, но как только я установил флажок на false, даже если я установил его снова, панель автозаполнения не работает.

@Component({
  selector: 'app-sample',
  templateUrl: './app-sample.component.html',
  styleUrls: ['./app-sample.component.styl']
})
export class AppSampleComponent implements OnInit {
  selectedOption = new FormControl('');
  disablePanel = false;
  filteredOptions: Option[] = [];
  private options: Option[] = [];


  constructor(private myService: MyService) { }

  ngOnInit() {
    this.myService.getOptions().subscribe(data => this.options = data.carriers);
    this.selectedOption.valueChanges.pipe(
      startWith<string | Option>(''),
      map(value => typeof value === 'string' ? value : value.name),
      map(name => name ? this.filterByName(name) : this.options.slice()),
      tap(filtered => {
        // If ever this evelauates to true, the panel stops appearining and when it evaluates back to false
        // it is as if all of auto-complete stops working.
        this.disablePanel = filtered.length > 6;
      }
    ).subscribe(filtered => this.filteredOptions = filtered);
  }

  private filterByName(value: string): Option[] {
    return this.options.filter( => option.name.toLowerCase().indexOf(value.toLowerCase()) === 0);
  }

}
<mat-form-field>
  <mat-icon matSuffix>search</mat-icon>
  <input [formControl]="selectedOption"
         placeholder="Select and Option"
         matInput
         [matAutocompleteDisabled]="disablePanel"
         [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
    <mat-option *ngFor="let option of filteredOptions " [value]="option">
      {{option.name}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

1 Ответ

0 голосов
/ 28 ноября 2018

Можете ли вы как-нибудь вынести этот код за пределы ngOnInit
this.disablePanel = filtered.length < 6;

. Можно установить, используя метод, подобный 

ngOnInit() {
    this.myService.getOptions().subscribe(data => this.options = data.carriers);
    this.selectedOption.valueChanges.pipe(
      startWith<string | Option>(''),
      map(value => typeof value === 'string' ? value : value.name),
      map(name => name ? this.filterByName(name) : this.options.slice()),
      tap(filtered => {
        // If ever this evelauates to true, the panel stops appearining 
        // and when it evaluates back to false
        // it is as if all of auto-complete stops working.
        this.callAMethod(filtered);
      }
    ).subscribe(filtered => this.filteredOptions = filtered);
  }

callAMethod(filtered) {
  this.disablePanel = filtered.length > 6;
}
...