Question

我认为我在mat-autocomplete中发现了一个错误（或者不了解它的工作原理），但是我想首先由大家运行。

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

有一个名为@Input的{{1}}根据docs取AutocompleteDisabled：

是否禁用了自动完成功能。禁用后，该元素将用作常规输入，用户将无法打开面板。

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

boolean

@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);
  }

}

Answer 1

您能以某种方式将这段代码带到xdown, ydown | | | | | | nintyX,nintyY <------------|centerx, centery | | | | | | xup, yup之外吗？
ngOnInit;

可以使用类似的方法设置

this.disablePanel = filtered.length < 6

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

1 个答案: