禁用后无法重新启用材料自动完成面板答案

【问题标题】：Cannot re-enable material autocomplete panel after disabling it禁用后无法重新启用材料自动完成面板
【发布时间】：2019-04-29 23:28:09
【问题描述】：

我想我在mat-autocomplete 中发现了一个错误（或者不明白它是如何工作的），但我想先由你们运行它。

在 TS 中，我点击过滤列表的数据流，如果列表超过 6，我不希望显示自动完成面板。

根据docs，有一个名为AutocompleteDisabled 的@Input 采用boolean：

自动完成是否被禁用。禁用时，该元素将充当常规输入，用户将无法打开面板。

我已经尝试从没有改变结果的 HTML 订阅。我什至尝试制作一个复选框，将值从 true 翻转为 false，但是一旦我将复选框设置为 false，即使我再次将其设为 true，自动完成面板也无法工作。

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

【问题讨论】：

如果可能，请在 stackblitz 上创建一个演示。

标签： angular angular-material material-design

【解决方案1】：

你能以某种方式把这段代码带到外面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;
}

【讨论】：