JavaScript：无法在第一次加载时使用自定义类为文本区域设置值

Question

问题：我正在尝试使用以下代码以编程方式在文本区域内设置一个值：

function setTextareaValue(textareaId, value) {
  // Recursive function to wait until the element is available
  function waitForTextarea() {
    const textareaElement = document.getElementById(textareaId);
    if (textareaElement && textareaElement.querySelector('.hwt-input')) {
      // Once the element is available, set the value
      const textareaInput = textareaElement.querySelector('.hwt-input');
      textareaInput.value = value;
      textareaInput.dispatchEvent(new Event("input", { bubbles: true }));
      textareaInput.dispatchEvent(new Event("change", { bubbles: true }));
    } else {
      // If the element is not available, try again after 100ms
      setTimeout(waitForTextarea, 100);
    }
  }

  // Start the recursive function
  waitForTextarea();
}

// Use the function to set the value to the textarea
setTextareaValue('MarcEditorPresenter.textArea.050.Left.6', 'Value set by code');

但是，当我第一次打开表单时，这不起作用。如果我手动单击并在字段中键入，然后再次运行脚本，它仍然不起作用。仅当我打开“检查”工具，单击检查器中的文本区域代码，然后正确设置值时，它才有效。

我尝试过调试，在代码中模拟textarea激活，但还是不行。关于为什么会发生这种情况以及如何解决它有什么想法吗？

Answer 1

如果文本区域是 FormControl，您可以在定义表单时设置其初始值。

如果它不是 FormControl，您可以使用

@ViewChild

和

AfterViewInit

生命周期挂钩来访问它并设置它的值：

// app.component.ts
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <textarea #myTextarea rows="4" cols="50"></textarea>
    </div>
  `
})
export class AppComponent implements AfterViewInit {
  // Get reference to the textarea element
  @ViewChild('myTextarea') textareaRef!: ElementRef<HTMLTextAreaElement>;
  

  ngAfterViewInit() {
    // Set initial value after view is initialized
    this.textareaRef.nativeElement.value = 'Initial text set after view init';
  }

}