角度材质输入字段动态宽度

Question

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

我找到了这个example 并尝试对其进行修改以解决我的问题，但找不到使其正常工作的方法。

这是我的 fork version。

Answer 1

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

另外，如果不添加setTimeout函数，输入的resize不流畅。在示例中，有一条评论说

如果没有 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);
}