Angular2输入值属性未正确刷新

Question

我有一个可以添加不同数量字段的表单。添加新字段时显示先前字段的正确值存在问题 - 每个字段都重置为默认值，似乎输入的 value 属性无法正常工作 see here

您可以看到该值已正确绑定（名称字段右侧的文本），但在创建“新列”期间，所有输入字段均重置为默认值。

HTML：

<div class="container col-8 top-buffer">
    <form #newTableForm="ngForm">
        <div class="form-group">
            <label for="Table Name">Table Name</label>
            <input type="text" class="form-control col-10" id="tableName" name="tableName" [(ngModel)]="tableWrapper.table.name" placeholder="Example Name">
        </div>
    <label for="Columns">Columns</label>
    <div class="form-group" *ngFor="let column of tableWrapper.columns; let i = index ">
        <div class="row">
            <div class="col-4">
                <div class="input-group">
                    <span class="input-group-addon" id="nameAddon">Name</span>
                    <input type="text" class="form-control" [(ngModel)]="column.name" #name="ngModel" name="name" value = {{column.name}} >{{column.name}}
                </div>
            </div>
            <div class="col-4">
                <div class="input-group">
                    <span class="input-group-addon" id="typeAddon" >Type</span>
                    <input type="text" class="form-control"  [(ngModel)]="column.type" #name="ngModel" name="type" value = {{column.type}} >
                </div>
            </div>
             <div class="col-md-auto">
                <div class="btn-group">
                    <button type="button" (click) = "deleteColumn(i)" class="btn btn-danger">Delete</button>
                    <button type="submit" (click) = "moveUp(i)" class="btn btn-info">Up</button>
                    <button type="submit" (click) = "moveDown(i)" class="btn btn-info">Down</button>
                </div> 
            </div>
        </div>
    </div>

    <div class="btn-group">
        <button type="button" (click) = "addColumn()" class="btn btn-success ">Add Column</button>
        <button type="submit" (click) = "display()" class="btn btn-primary">Add Table</button>
    </div> 
    </form>
</div>

组件：

import { Column } from './../common/Column';
import { TableWrapper } from './../common/TableWrapper';
import { Component, OnInit, Input } from '@angular/core';

@Component({
    template: require('app/creator/createTable.component.html!text')
})
export class CreateTableComponent implements OnInit {
    tableWrapper: TableWrapper;
    name: string;
    constructor() { }

    ngOnInit() {
        this.tableWrapper = new TableWrapper();
        this.tableWrapper.columns.push(new Column());
    }

    addColumn() {
        this.tableWrapper.columns.push(new Column());
    }

    deleteColumn(index: number) {
        this.tableWrapper.columns.splice(index, 1);
    }

    moveUp(index: number){
        if(index !== 0) {
        [ this.tableWrapper.columns[index], this.tableWrapper.columns[index - 1] ] =
        [ this.tableWrapper.columns[ index - 1 ], this.tableWrapper.columns[index] ];
        }
    }

     moveDown(index: number){
        if(index !== this.tableWrapper.columns.length - 1) {
        [ this.tableWrapper.columns[index], this.tableWrapper.columns[index + 1] ] =
        [ this.tableWrapper.columns[ index + 1 ], this.tableWrapper.columns[index] ];
        }
    }

    display(){
        console.log(JSON.stringify(this.tableWrapper));
    }

    getNameByIndex(index: number): string {
        return this.tableWrapper.columns[index].name;
    }

}

表格包装器：

import { Table } from './Table';
import { Column } from './Column';
export class TableWrapper {
    table: Table;
    columns: Array<Column>;

    constructor(){
        this.table = new Table();
        this.columns = new Array();
    }
}

列：

export class Column {
    id: number;
    tableId: number;
    name: string;
    type: string;

    constructor(){
        this.name = 'Example Name';
        this.type = 'Example Type';
    }
}

Answer 1

这是因为您有一个表单，在该表单上，您对数组的所有表单字段使用相同的 name 属性，然后将其评估为一个相同的值。在这种情况下，[(ngModel)] 将被覆盖。当您为 name 属性赋予唯一名称时，您的代码将按您的意愿工作。最简单的方法是利用数组中值的索引，并将其分配给您的 name 属性。所以对于列名，它将如下：

<div *ngFor="let column of tableWrapper.columns; let i = index ">
    <input type="text" class="form-control" [(ngModel)]="column.name" #name="ngModel" name="name{{i}}" value = {{column.name}} >{{column.name}}
</div>

这是一个

Plunker

列名和类型有效:)