Angular 8输入框无法加载数据库数据，ngModel双向绑定仅单向生效

你遇到的这个情况其实是Angular表单机制里的常见小坑——[(ngModel)]和value属性（或textarea的插值语法）是互斥的，再加上循环生成表单控件时没设置唯一name，双重因素导致了绑定异常。

核心问题分析 #

1. 当你同时给input设置value和[(ngModel)]时，Angular会优先处理ngModel的绑定逻辑，直接忽略value属性。如果初始数据是异步获取的（比如从数据库HTTP请求拉取），再加上循环里所有控件的name都相同，Angular无法正确关联每个控件和对应的模型数据，就会出现输入框为空，但非表单元素能正常显示数据的矛盾情况。
2. textarea的问题同理：你在标签内部写{{ r.reviewText }}会和[(ngModel)]的绑定逻辑冲突，导致初始值被强制覆盖为空。

正确的解决方案 #

1. 修复input标签的绑定

完全移除value属性，只保留[(ngModel)]，同时给循环里的每个input设置唯一的name属性（用索引或评论的唯一ID都可以）：

<form>
  <div *ngFor="let r of reviews; let i = index">
    <!-- 用索引生成唯一name，若评论对象有唯一ID字段（如r.id），更推荐用r.id -->
    <input [name]="'review-text-' + i" [(ngModel)]="r.reviewText" />
  </div>
</form>

2. 修复textarea的绑定

同样移除标签内部的插值语法，只保留[(ngModel)]和唯一name：

<form>
  <div *ngFor="let r of reviews; let i = index">
    <textarea [name]="'review-textarea-' + i" [(ngModel)]="r.reviewText"></textarea>
  </div>
</form>

为什么这样就能解决？ #

• [(ngModel)]本身就包含了**单向数据绑定（组件模型→视图）和双向绑定（视图→组件模型）**的完整功能，不需要额外的value或插值语法来设置初始值。
• 循环里的控件必须有唯一的name，Angular依赖这个属性来追踪每个表单控件对应的模型实例，避免绑定混乱。

这样修改后，页面加载/刷新时，数据库返回的r.reviewText会通过ngModel正确显示在输入框/textarea中，同时你修改内容时也能同步更新模型，之后通过HTTP PUT保存到数据库的逻辑也能正常工作。

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