javascript - 如何将 showPanel:boolean 属性应用于 matautocomplete，如文档中所示

问题描述

我正在尝试使用自动完成属性

showPanel: boolean 自动完成面板是否可见，取决于选项长度。

根据我了解的文档，自动完成面板将根据垫选项长度扩展其宽度。如果我错了，请纠正我。链接到官方文档官方文档

我有一个很长的垫子选项，即使在应用 showPanel 之后也是如此；matpanel 没有展开。我不确定我是否正确使用了该属性。这是我尝试过的

模板.html

<label>Search names</label>
<input type="text"
       placeholder="search name"
       aria-label="Number"
       matInput
       [formControl]="myControl"
       [matAutocomplete]="auto">
     
<mat-autocomplete #auto="matAutocomplete" showPanelLocal>
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
      {{option}}
    </mat-option>
</mat-autocomplete>

模板.ts

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'app-matautocom',
  templateUrl: './matautocom.component.html',
  styleUrls: ['./matautocom.component.css']
})
export class MatautocomComponent implements OnInit {

  names: string[] = ['Lorem Ipsum is simply dummy text of the printing and typesetting industry', 'ustu', 'caty','momo', 'rekh', 'john', 'kemp'];

  myControl: FormControl = new FormControl();

  filteredOptions: Observable<string[]> | undefined;

  @Input('showPanel') showPanelLocal: boolean = true;//showPanel property
 

  ngOnInit(): void {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );
  }
  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
 
    return this.names.filter(option => option.toLowerCase().includes(filterValue));
   
  }

}

正如您在图片中看到的垫选项不完全可见。
这是角度文档的链接。

标签： javascriptangulartypescript

你弄错了，很遗憾。这不是输入，因此无法设置 - 它只是一个通知下拉菜单是否可见的属性。它基于选项的长度，即如果有 0 个选项（例如，用户键入的内容不属于任何提供的选项），这将返回 false。您可以在此处找到此属性的源代码，并在此处设置它的值- 因此手动更新它不会有任何区别。

您可以通过在自动完成上设置属性（此处panelWidth的文档）来设置下拉面板的宽度。这是一个静态值的原因是，否则下拉菜单会根据当前呈现的选项更改宽度，这将是糟糕的 UI（因为宽度可能会在每个键入字符后发生变化）。

除此之外，您可以更改面板和项目的覆盖样式，但我个人建议不要这样做。

javascript - 如何将 showPanel:boolean 属性应用于 matautocomplete，如文档中所示

问题描述

解决方案

推荐阅读