Angular 5 - 输入文本和ngModel的奇怪行为
Angular 5 - 输入文本和ngModel的奇怪行为
使用以下精炼的代码将内容翻译成中文：
使用一个简单的字符串input_text作为你的组件的基本输入。
它可以工作，很好。双向数据绑定可以工作，并且你可以在按钮下面看到你输入的值。
现在，在你的组件中用以下代码替换input_text：
input_text:Array
并在你的模板中尝试以下代码：
{{input_text}}
你有4个输入框，很好地初始化（带有正确的名称）。
但是当你尝试在一个字段中输入文本时，你会失去焦点，并且input_text数组没有改变（{{input_text}}总是显示相同的数组）。
将[(ngModel)]="input_text[i]"替换为[(ngModel)]="text"不起作用。
有人能解释这里发生了什么吗？
非常感谢！
问题的出现原因是因为在Angular 5中，使用{{ input_text }}无法显示更新后的数组。
解决方法是使用<div *ngFor="let item of input_text">{{ item }}</div>来在Angular 5中输出数据。
以下是整理后的文章：
在Angular 5中，使用{{ input_text }}无法显示更新后的数组。原因是在Angular 5中，该语法不再起作用。
一位用户在提问中提到：“{{input_text}}显示了初始化的数组，但是不会更新。我以为是组件中的问题，但实际上数组已经更新了，只是在模板中没有更新，因为input_text是一个数组。”
另一位用户在回答中指出了该问题的差异所在。他提到，在Angular 2中，可以使用{{ input_text }}来显示更新后的数组，但是在Angular 5中不再起作用。他还给出了一个代码示例，展示了如何在Angular 5中输出数据：<div *ngFor="let item of input_text">{{ item }}</div>。
通过这个解决方法，用户可以在Angular 5中正确地输出更新后的数组。
Angular 5 - input文本和ngModel的奇怪行为
最近有一个Angular 5的问题引起了我的注意。问题是在使用input文本和ngModel时出现了奇怪的行为。经过研究，我找到了问题的原因并提供了解决方法。
问题的原因是在组件中没有正确初始化input_text数组。在代码中，input_text数组应该被初始化为一个对象数组，每个对象都有一个name属性。但是，在没有正确初始化input_text数组的情况下，ngModel会导致奇怪的行为。
解决方法是在组件中正确初始化input_text数组。以下是正确的初始化代码：
input_text: Array<object> = [{name: 'A'}, {name: 'B'}, {name: 'C'}, {name: 'D'}];
当我们使用这个正确初始化的数组时，ngModel将按预期工作，将输入文本与数组中的相应对象的name属性绑定。
以下是解决问题后的代码：
<form (submit)="input_button($event)">
<input
*ngFor="let text of input_text; let i = index"
type="text"
[(ngModel)]="input_text[i].name"
name="code_{{i}}"/>
<br/>
<input
type="submit"
value="Ok"/>
</form>
{{input_text | json}}
通过正确初始化input_text数组，我们解决了Angular 5中input文本和ngModel的奇怪行为问题。现在，输入文本将与数组中的相应对象的name属性正确绑定。