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

用[（ngModel）] =“text”替换[（ngModel）] =“input_text [i]”什么都不做

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

非常感谢！

Answer 1

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

<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

2 个答案: