Angular 5 - 输入文本和 ngModel 的奇怪行为答案

【问题标题】：Angular 5 - Strange behaviour with input text and ngModelAngular 5 - 输入文本和 ngModel 的奇怪行为
【发布时间】：2018-01-12 15:21:25
【问题描述】：

接受这个基本输入

<form (submit)="input_button($event)">
        <input
            type="text"
            [(ngModel)]="input_text"
            name="code"/>
            <br/>

    <input
        type="submit"
        value="Ok"/>
    </form>
    {{input_text}}

在您的组件中使用一个简单的字符串 input_text。它正在工作，很好。双向数据绑定正在工作，您可以在按钮下方看到输入的值。

现在，将组件中的 input_text 替换为

input_text:Array<string> = ['A', 'B', 'C', 'D'];

在你的模板中试试这个：

<form (submit)="input_button($event)">
        <input
            *ngFor="let text of input_text; let i = index"
            type="text"
            [(ngModel)]="input_text[i]"
            name="code_{{i}}"/>
            <br/>

    <input
        type="submit"
        value="Ok"/>
    </form>
    {{input_text}}

您有 4 个输入，初始化良好（使用正确的名称）。但是当您尝试将文本放在字段中时，您会失去焦点并且 input_text 数组未更改（{{input_text}} 始终显示相同的数组）

将 [(ngModel)]="input_text[i]" 替换为 [(ngModel)]="text" 没有任何作用

有人能解释一下这里发生了什么吗？

非常感谢！

【问题讨论】：

我认为数组元素不能自动检测变化。因此，初始化没问题，但它不能简单地在稍后自动您可以查看这些问题，了解如何在这些情况下强制更改检测：stackoverflow.com/questions/35748484/…stackoverflow.com/questions/42962394/…
我建议使用模型驱动表单，它会更适合您的场景。但如果你想使用模板驱动，那么提供一个 plnkr
看看IterableDiffers
尝试按照this answer 中的建议和this plunker 中的说明在您的ngFor 指令中添加trackBy。
我已经尝试过 trackBy。我没有失去焦点，但 input_text 数组仍然没有改变

标签： angular angular-ngmodel angular5

【解决方案1】：

在您的组件input_text: Array<object> = [{name: 'A'}, {name: 'B'}, {name: 'C'}, {name: 'D'}]; 中尝试初始化并运行以下代码：

<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}}

【讨论】：

【解决方案2】：

好吧，trackBy 正在工作，但 {{input_text}} 没有触发，因为它是一个对象

感谢大家的帮助

【讨论】：

“不触发，因为它是一个对象”是什么意思？它不是一个字符串数组吗？根据题中给出的代码示例，输出应该是OK的，如this plunker所示。
{{input_text}} 显示初始化的数组但不更新。我以为它没有在组件中更新，但它是，它只是没有在模板上更新，因为 input_text 是一个数组
好的，我发现了 plunker 和你的代码之间的区别。 plunker 使用 Angular 2 并使用 {{ input_text }} 显示更新后的数组，但这在 Angular 5 中不再起作用。This stackblitz 显示如何在 Angular 5 中输出数据：<div *ngFor="let item of input_text">{{ item }}</div>。