如何解决Angular中*ngFor在模态框(modal)内无法正常运行的问题

问题原因排查 #

• 模板语法错误：你的代码中<td *>是无效写法，结构型指令的星号后必须跟随具体指令（如*ngIf、*ngFor），错误语法会导致模板编译失败，页面渲染异常。
• *ngFor绑定位置错误：你将*ngFor绑定在了<table>标签上，每遍历wtl数组的一项就会生成一个独立表格，当数组长度大于1时多表格堆叠会直接撑坏模态框布局，正确做法是将*ngFor绑定到<tr>标签上，循环生成表格行而非整个表格。
• 表单属性重复冲突：所有循环生成的textarea都使用了相同的name="comment"和id="description"，Angular表单中ngModel双向绑定依赖name属性的唯一性，重复值会导致所有文本框的绑定值互相覆盖；重复id也会导致表单标签关联逻辑异常。
• 固定宽度导致溢出：mat-form-field写死了width: 600px的固定样式，如果模态框容器宽度小于600px，会直接导致表单控件溢出模态框显示，出现布局错乱。

修正后代码示例 #

<table>
  <tr *ngFor="let wt of wtl; let i = index">
    <td>
      <mat-form-field style="width: 100%; max-width: 600px;">
        <textarea 
          rows="8" 
          cols="360" 
          matInput 
          [(ngModel)]="wt.description" 
          name="comment-{{i}}"
          type="text" 
          id="description-{{i}}" 
          placeholder="Comentarios de Cierre"
          autocomplete="off"
        ></textarea>
      </mat-form-field>
    </td>
  </tr>
</table>

内容的提问来源于stack exchange，提问作者Luis Estrada