Javascript 我在将动态创建的材料输入字符串插入网页时遇到问题

下面是代码，我生成一个Textarea材质输入和一个值，并将其插入名为child_2的div中。问题在于它加载了默认的HTML文本区域，而且里面没有加载值

      const box = document.getElementById(cmt_id);

        const child_1 = box.children[0];
        const child_2 = box.children[1];
        let comment_text = child_1.innerHTML;

        let inputText = `
          <mat-form-field appearance="outline" class="w-100">
          <textarea
          matInput 
          matTextareaAutosize 
          [matAutosizeMinRows]="2" 
          [matAutosizeMaxRows]="6"
          class="comment" 
          (keyup.enter)="updateComment($event.target.value, ct.id)"
          [(value)]="${comment_text}"
          ></textarea>
          </mat-form-field>
          `;
          child_2.innerHTML = inputText;

const-box=document.getElementById（cmt\u-id）；
const child_1=box.children[0]；
const child_2=box.children[1]；
让comment_text=child_1.html；
让inputText=`
`;
child_2.innerHTML=inputText；

此代码的工作原理如图所示

生成的文本区域输入。 请帮忙

@ViewChildren（“textField”）textFields:QueryList

试着从角度理解这个概念