数据未加载到Angular 8中的输入字段答案

【问题标题】：Data not loading to input field in Angular 8数据未加载到Angular 8中的输入字段
【发布时间】：2020-01-09 12:52:18
【问题描述】：

我在 Angular 8 的组件 html 文件中有一个输入字段

<!-- simplified -->    
<form>
<div *ngFor="let r of reviews">
<input name="Text" value="{{ r.reviewText }}" [(ngModel)]="r.reviewText" />
</div>
</form>

[(ngModel)] 很好地将数据更新（http puts）回数据库。问题是value="{{ r.reviewText }}" 不会在加载或重新加载页面时将数据库中存在的数据加载回该字段。我可以输入内容，但加载/重新加载时输入字段始终为空白。无论语法是value="{{ r.reviewText }}" 还是[value]="r.reviewText"，情况都是如此。

如果我删除 [(ngModel)]="r.reviewText" -- 然后数据被加载到该字段的值中，但显然在更新回数据库方面的绑定不起作用。好像 ngModel 和 value 元素是互斥的。我理解 [(ngModel)] 是双重绑定 - 但在这种情况下，它似乎只是单一绑定 - 推回数据库可以，但不会反过来。我尝试了与 textarea 类似的方法，但它与输入有相同的问题 - 它不显示 r.reviewText，但 ngModel 有效：

<textarea name="Text" [(ngModel)]="r.reviewText" >{{ r.reviewText }}</textarea>

注意：如果我将{{ r.reviewText }} 放在页面的其他位置，而不是在输入或 textarea 标记中，则来自 db 的数据会在加载/重新加载时显示在该位置 - 然后还会镜像我在输入字段中键入的内容当我键入时 - 正如预期的那样。

如何在页面加载或刷新时在输入的 value 参数中显示 {{ r.reviewText }} 的数据库内容，同时仍然能够使用 [(ngModel)] 将更新的内容更新/保存到数据库？任何意见表示赞赏，谢谢。

【问题讨论】：

嗨，你能在这里打印整个评论数组吗？
看起来问题出在 *ngFor.. 使用 asyn 并尝试*ngFor="let r of reviews | async"
评论对象是这样的：{ "id": 1399, "reviewText": "ghjjhhh", "okNotOk": false, "toBeDeleted": false, "reviewerName": "reviewer1", "itemCode": "YFS001" }
*ngFor="let r of reviews"，这里的 reviews 是数组还是对象？首先澄清这一点！
Sunny - 它是一个包含 2000 个对象的数组，我只是给你一个例子 - 不打算放入整个数组

标签： angular angular8

【解决方案1】：

你不需要价值 [(ngModel)] 用于 2 路绑定，它应该按预期工作而没有价值

<input name="Text" [(ngModel)]="r.reviewText" />

stackblitz 上的一个很小的例子https://stackblitz.com/edit/angular-keprkp

【讨论】：

仅仅删除value参数是不行的。您的 stackblitz 示例没有连接数据库以将数据加载到输入字段的 value 参数——它没有演示在页面加载/重新加载时将数据加载回字段：这是我描述的问题。即：我的案例的行为类似于您的 stackblitz 示例，除了我有一个数据库 - 并且希望在页面重新加载时查看该参数显示的现有数据
我同意，如果你把 Akhil 的评论和这个结合起来，那么它可能会起作用

【解决方案2】：

删除 html <form> 标记使 {{ r.reviewText }} 在页面重新加载时显示为输入标记或 textarea 标记内的值。 ngModel 2-way binding 工作。

我还不知道为什么，或者删除表单标签是否会产生副作用..

这些建议指针 - 但没有关于为什么完全删除 html <form> 标记，似乎有效。 Angular error: If ngModel is used within a form tag, either the name attribute must be set or --和 -- Angular 2 - ngModel does not work inside <form> after updating to rc4

对于所有可能想要建议的人，我将 formsModule 包含在 app.module.ts 中——它一直存在并且仍然存在；那不是问题。谢谢。

【讨论】：