Angular 2中ngModel仅支持单个字符修改问题及动态表格咨询

我来帮你搞定这两个Angular开发里的问题，先从动态列表格的优化说起，再解决ngModel只能输入单个字符的坑！

一、动态列表格代码优化 #

看你现在的代码，已经用*ngFor实现了动态表头，但tbody里用*ngIf="i!=0"来跳过第一行，其实可以更简洁一点——直接把表体数据取jsonText.slice(1)，这样就不用额外判断索引了，可读性更好。

优化后的代码示例：

<table class="table-conf">
  <thead>
    <!-- 加个安全导航符`?`，避免初始加载时jsonText为undefined报错 -->
    <tr>
      <th *ngFor="let header of jsonText?.[0]" style="text-align: center;">{{header}}</th>
    </tr>
  </thead>
  <tbody>
    <!-- 直接取从第二行开始的数据，不用判断索引 -->
    <tr *ngFor="let row of jsonText.slice(1)">
      <td *ngFor="let cell of row">
        <!-- 这里放可编辑的输入框，绑定ngModel -->
        <input type="text" [(ngModel)]="cell" />
      </td>
    </tr>
  </tbody>
</table>

如果你的jsonText是异步接口返回的，记得用async管道或者确保数据加载完成后再渲染，不然也容易出问题。

二、ngModel只能输入单个字符的问题排查 #

这个问题我之前踩过坑，大多是Angular的变更检测没正确触发导致的，下面给你几种常见的解决办法，按优先级来试：

1. 把绑定的原始类型改成对象属性 #

如果你的每行数据是数组（比如["张三", "25", "前端"]），直接绑定数组里的原始类型（字符串/数字），Angular可能检测不到变化。这时候把每行改成对象形式，比如{name: "张三", age: "25", job: "前端"}，然后绑定对象的属性：

组件里调整数据结构后，模板改成：

<td *ngFor="let key of Object.keys(row)">
  <input type="text" [(ngModel)]="row[key]" />
</td>

2. 给*ngFor加trackBy函数 #

如果必须用数组原始类型，那就给*ngFor加个trackBy函数，帮Angular正确识别每个元素，避免每次输入都重新渲染整个列表：

先在组件类里定义trackBy函数：

trackByIndex(index: number): number {
  return index;
}

然后模板里用上：

<tr *ngFor="let row of jsonText.slice(1); trackBy: trackByIndex">
  <td *ngFor="let cell of row; trackBy: trackByIndex">
    <input type="text" [(ngModel)]="cell" />
  </td>
</tr>

3. 检查数据更新方式是否正确 #

如果你是动态修改jsonText的数据，记得要创建新数组而不是修改原数组，Angular的变更检测对数组的push/shift这类操作不敏感。比如：

// 正确：创建新数组触发变更检测
this.jsonText = [...this.jsonText, newRowData];

// 错误：直接修改原数组，可能不触发检测
this.jsonText.push(newRowData);

4. 手动触发变更检测（最后再试） #

如果上面的方法都没用，再考虑手动触发变更检测，导入ChangeDetectorRef调用detectChanges()：

组件类里：

import { Component, ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

onInputChange() {
  this.cdr.detectChanges();
}

模板里绑定input事件：

<input type="text" [(ngModel)]="cell" (input)="onInputChange()" />

总结 #

• 动态列表格用slice(1)分离表头和表体，加安全导航符避免报错；
• ngModel单字符问题优先改数据结构或加trackBy，尽量别手动触发变更检测，不然代码会变复杂。

内容的提问来源于stack exchange，提问作者Vítor Resende