javascript - Typescript - 手动刷新文本区域

Question

我有一个 textarea与 height: auto; .但是，当我重置 [ngModel]与该文本区域关联的变量(例如 this.myNgModelVar = ""; )，文本区域的高度不会自动降低，直到用户再次开始输入。

由于我找不到任何解决方案，我想我可能只想刷新 <textarea> .但问题是，在 Typescript 上，我该如何刷新/更新它？

Answer 1

有一个 hack，我用它来重新创建 DOM 元素，但有些人不喜欢它。

<textarea *ngFor="let x of refresh"></textarea>

然后在你的组件中。

@Component({...})
export public MyComponent {
     public refresh = [1];

     public constructor(private change: ChangeDetectorRef) {}

     public refreshTextArea() {
        this.refresh[0]++;
        this.change.markForCheck();
     }
}

这是有效的，因为 *ngFor数组更改时将更新 DOM 元素的集合。我们使用 this.refresh[0]++修改触发 *ngFor 的第一个元素重新创建 DOM 元素。该数组只有一个元素，所以只有一个 <textarea>将被创建。

看到此内容的其他 Angular 开发人员可能会感到困惑。所以一定要添加评论来解释你为什么这样做。

另一种方法是使用 *ngIf和一个 setTimeout从 false 切换 bool 值至 true并允许 Angular 重新渲染 DOM 元素。这是更多的代码，甚至更令人困惑(如果你问我的话)。