Angular表格中如何根据数组行数据动态渲染下拉框或输入框

你的代码存在5个核心错误，直接导致功能异常：

• 事件绑定名写错：Angular 2+ 中输入控件值变更事件是(ngModelChange)，你写的(ngChange)是AngularJS（1.x版本）的旧写法，事件根本没有绑定成功，所以updateOptions方法永远不会触发。
• 方法逻辑不完整：updateOptions里仅完成了字符串拆分，但拆分结果存在局部变量tagValidValuesArray中，没有给类属性validValuesArray赋值，就算方法触发也拿不到选项数据。
• 数据源设计错误：用全局的validValuesArray存储所有行的下拉选项，会导致所有下拉选项被最后一次渲染的行覆盖，根本无法实现每行匹配自身选项列表的需求。
• 字段名拼写错误：模板里写的{{tag.tagname}}和TS中定义的字段tagName（驼峰大写N）不一致，标签名列会直接渲染为空。
• 触发时机错误：把选项初始化逻辑绑定在下拉值变更事件上，页面首次加载时不会触发这个事件，所以初次渲染时所有下拉都是空值。

不需要额外定义validValuesArray全局属性和updateOptions方法，直接在模板中针对当前行的validvalues做拆分渲染即可，逻辑更简单也不会出现行数据混淆的问题：

修复后的TS代码 #

// 仅保留tags数组即可，删除原有的validValuesArray属性和updateOptions方法
tags = [
    {tagName: 'AppID', value: 'T400', validvalues: 'T100/T200/T300/T400/T500'},
    {tagName: 'Series', value: 'SUPR', validvalues: ''},
    {tagName: 'Collection', value: 'AUTO', validvalues: 'EFIT/AUTO/FLEET'},
    {tagName: 'Function', value: 'Accounting', validvalues: 'Sales/Marketing/Accounting/Shop'},
    {tagName: 'Contact', value: 'Jim Jones', validvalues: ''}
]

修复后的HTML代码 #

<table>
  <tr>
    <th>Tag Name</th>
    <th>Value</th>
  </tr>
  <tr *ngFor="let tag of tags; let i=index">
    <td>
      <!-- 修正tagName的驼峰拼写 -->
      <div>{{tag.tagName}}</div>
    </td>
    <td>
      <!-- 空值判断加trim校验，避免全空格字符串误判 -->
      <div *ngIf="!tag.validvalues?.trim()">
        <!-- name属性加索引后缀，避免ngModel按name识别控件时值联动错乱 -->
        <input type="text" name="value_{{i}}" [(ngModel)]="tag.value">
      </div>
      <div *ngIf="tag.validvalues?.trim()">
        <select [(ngModel)]="tag.value">
          <!-- 直接拆分当前行的validvalues作为选项，无需依赖全局数组 -->
          <option *ngFor="let opt of tag.validvalues.split('/')" [value]="opt">{{opt}}</option>
        </select>
      </div>
    </td>
  </tr>
</table>

如果你后续需要对拆分后的选项做额外处理（比如过滤空值、去重），可以写一个通用转换方法或者管道，在模板中直接传入当前行的validvalues调用即可，不要用全局变量存储单一行的选项数据。

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