Mat-autocomplete 面板的宽度应与主机输入的宽度相同，或者根据内容更宽答案

【问题标题】：Mat-autocomplete panel should be the same width as host input, or wider depending on contentMat-autocomplete 面板的宽度应与主机输入的宽度相同，或者根据内容更宽
【发布时间】：2021-04-23 17:39:18
【问题描述】：

我有一个有角度的自动完成树组件，但我对自动完成面板的宽度有疑问。

我有两个要求可以单独解决，但不能一起解决：

一旦内容比面板宽，面板应该会增大。我为此使用了[panelWidth] = "auto"，效果很好。
面板应具有主机输入的最小宽度。也可以为此使用 panelWidth ，但我失去了第一点的功能。

来自Change the mat-autocomplete width?）我看到我可以使用[panelWidth] = "auto"。

我知道我可以使用 css 样式 .mat-autocomplete-panel{min-width: "300px"} 但不知道如何获取具体输入的宽度。

所以我求助于javascript。我在文档中看到 AutocompletePanel 公开了面板 ElementRef，但是无论我做什么，这个值 似乎都是未定义的？使用@ViewChild 获取此值的正确方法是什么？我有以下代码在 opened 事件上运行。

<mat-autocomplete #autocomplete (opened)="opened()" [panelWidth]="auto" #auto="matAutocomplete">

@ViewChild("auto") autocomplete: MatAutocomplete;
@ViewChild("autoTreeInput") autoTreeInput: ElementRef;

  opened = () => {
    setTimeout(()=>{

    let p = this.autocomplete.panel?.nativeElement; //always null because panel is undefi
    console.log("opened", p, this.autocomplete);
    if (!p ) return
    p.style.minWidth =
      this.autoTreeInput.nativeElement.getBoundingClientRect().width + "px";
    },1000)
  };

Stackblitz

【问题讨论】：

标签： javascript angular angular-material mat-autocomplete

【解决方案1】：

我已经回顾了你的 stackblitz 示例。

看起来更像是一个 CSS 问题。

在autocomplete-simple-example.css 文件上试试这个

.example-form {
  min-width: 150px;
  // max-width <-- remove it to use 100% of width
  width: 100%;
}

.example-full-width {
  width: 100%; // add this to use all width.
  transition: width 0.5s ease;
}
.mat-focused {
  width: 270px;
}

这里有一个工作示例：stackblitz

编辑

您可以将任何有效的 CSS 添加到 width css。通过这种方式添加了calc(100% - 60%) 以使其与输入相同

.example-form {
  min-width: 150px;
  width: 100%;
}

.example-full-width {
  width: 100%;
  transition: width 0.5s ease;
}
.mat-focused {
  width: 100%;
}

<mat-autocomplete (opened)="opened()" panelWidth="calc(100% - 60px)" </mat-autocomplete>

Working example

【讨论】：

所以我需要面板与的宽度相同，或者如果内容变得更宽则更多。在您的示例中似乎没有发生这种情况
抱歉，还是没有骰子。 panelWidth="calc(100% - 60px)" 将使面板成为窗口的 100% 而不是输入的 100%，因此调整输入大小不会影响面板的宽度。此外，如果 panelWidth 未设置为“auto”，则 panelWidth 不会随着内容的增长而增长。请注意我的问题中的两个要求，因为我知道如何单独而不是一起实现每个要求。

【解决方案2】：

面板 elementRef 在opened 事件被触发之后（未打开）显示。更具体地说，在面板被添加到 DOM 之后。因此，只需添加一个setTimeout，我就可以在其中获得该元素的工作原理。不幸的是，这意味着元素以错误的宽度显示，然后跳转到输入的宽度。

可能有更好的解决方案，但这就是我现在要做的。

 opened = ()=> {
    let inputWidth = this.autoInput.nativeElement.getBoundingClientRect().width
    setTimeout(()=>{
      let panel = this.autocomplete.panel?.nativeElement;

      if (!panel ) return
      panel.style.minWidth = inputWidth + "px";
    })
  }

Working stackblitz

【讨论】：