角材料输入场的动态宽度

Question

我正在尝试使材料表单字段具有动态宽度。该字段是一个禁用字段，并且只能以动态方式来使绑定的字符串确定页面加载时该字段的长度。

我找到了这个example，并试图对其进行修复以解决我的问题，但是找不到使它起作用的方法。

这是我分叉的version。

Answer 1

在您的版本中，您只是忘记添加(input)=resizeInput()，它可以完美运行。

此外，如果不添加setTimeout函数，则输入的调整大小将不平滑。在示例中，有一条评论说

没有setTimeout的宽度被更新为以前的长度

所以我建议您保留它。

最后，这可以在您的代码中起作用：

resizeInput(newInputWidth: string) {
  setTimeout ( () =>{
    const minWidth = 64;
    if (this.invisibleTextER.nativeElement.offsetWidth > minWidth) {
      this.width = this.invisibleTextER.nativeElement.offsetWidth + 2;
    } else {
      this.width = minWidth;
    }
  }, 0);
}