Typescript - 手动刷新文本区域

Posted 2023-05-07

【中文标题】Typescript - 手动刷新文本区域

【英文标题】：Typescript - Manual refresh textarea

【发布时间】：2019-01-02 20:44:39

【问题描述】：

我有一个textarea 和height: auto;。但是，当我重置与该 textarea 关联的 [ngModel] 变量（例如 this.myNgModelVar = "";）时，textarea 的高度不会自动减小，直到用户再次开始输入。

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

【参考方案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 开发人员可能会感到困惑。所以一定要添加 cmets 来解释你为什么这样做。

替代方法是使用*ngIf 和setTimeout 将布尔值从false 切换到true，并允许Angular 重新渲染DOM 元素。那是更多的代码，甚至更令人困惑（如果你问我的话）。

【讨论】：

我刚刚尝试了提供的代码。奇怪的是，当我调用refreshTextArea() 方法时，textarea 并没有改变。也许我没有正确地做某事。我应该将上面提供的代码存储在导出的类中，对吧？

@Smitherson 我已经更新了我的答案以使用ChangeDetectorRef。这将告诉 Angular 视图需要重新渲染。

@Smitherson 很抱歉，我在原来的答案中犯了一个错误。 .slice() 将通知ngFor 数组已更改，但您必须修改数组元素以触发重新创建 DOM 元素。所以我改为增加数字。

我刚刚又试了一次。奇怪的是，我的文本区域消失了。它甚至没有呈现在视图上。关于为什么会发生这种情况的任何想法？

【参考方案2】：

要刷新文本区域，请在组件的构造函数中包含 ChangeDetectorRef：

constructor(private cd: ChangeDetectorRef) 

此后，无论您想刷新，只需调用

this.cd.detectChanges();