Question

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

由于我无法找到解决方案，因此我发现我可能只想刷新<textarea>。但是问题是，在Typescript上，如何刷新/更新它？

Answer 1

我使用一种黑客来重新创建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切换到true，并允许Angular重新呈现DOM元素。这要多得多的代码，甚至会更加令人困惑（如果您问我）。

Answer 2

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

constructor(private cd: ChangeDetectorRef)

之后你想刷新的地方，只要调用

this.cd.detectChanges();

打字稿-手动刷新文本区域

2 个答案: