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

Question

接受这个基本输入

<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 个输入，以及初始化 ez（使用正确的名称）。但是，当您尝试将文本放入字段中时，您失去了焦点并且 input_text 数组未更改（{{input_text}} 始终显示相同的数组）

用 [(ngModel)]="text" 替换 [(ngModel)]="input_text[i]" 什么都不做

谁能解释一下这里发生了什么？

非常感谢！

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

Answer 2

好吧，trackBy 正在运行，但 {{input_text}} 不会触发，因为它是一个对象

感谢大家的帮助

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

Angular 5 - Strange behaviour with input text and ngModel

angular-ngmodel

angular

angular5