Question

我有一个var this.optionCollection =[]

我有多个动态输入（参见我的代码）。我想当我在输入中输入内容时，它的值将被保存回数组。这是我的尝试

    @Component({
        selector: 'SomeOptions',
        template: `
            <form (submit)="onSubmit()">
                <div *ngFor="let i of optionCollection; let index = index">
                    <input type="text" placeholder="Add a Choice" [(ngModel)]="optionCollection[index]" [ngModelOptions]="{standalone: true}" />
                    <b class="delete" (click)= "removeClick(index)">-</b>
                </div>
                <div>
                    <button type="submit" class="btn btn-primary">Create</button>
                </div>
            </form>
        `,

    })
    export class OptionComponent {
        optionCollection : string[]
        constructor() {
            this.optionCollection = ['','']
        }
        addClick(event:any) {
            event.preventDefault()
            this.optionCollection.push('')
        }
        removeClick(index){
            this.optionCollection.splice(index,1)
        }
        onSubmit() {
            console.log('submit')
        }
    }

问题：输入的值未正确保存到数组中，并且在我输入时有奇怪的行为，您可以在下面的视频中查看该行为

http://youtu.be/V-WpaxZFVG8

Answer 1

由于您有基元列表，因此在任何输入中的每次输入时，ngFor指令都会重绘您的列表。

可能的解决方案：

1）使用trackBy

*ngFor="let i of optionCollection; let index = index; trackBy: trackByFn"

trackByFn(index) {
  return index;
}

<强> Plunker Example

2）使用object而不是string

<div *ngFor="let item of optionCollection; let idx = index">
  <input type="text" placeholder="Add a Choice" [(ngModel)]="item.text" [ngModelOptions]="{standalone: true}" />
  <b class="delete" (click)= "removeClick(idx)">-</b>
</div>

constructor() {
  this.optionCollection = [{ text: '' }, { text: '' }];
}
addClick(event: any) {
  event.preventDefault()
  this.optionCollection.push({ text: '' })
}

<强> Plunker Example

Answer 2

由于字符串是原始数据类型。通过使用空字符串数组意味着您引用相同的位置。

试试这个， 1）创建一个类

export class MyObj {
    value: string;
}

2）你的数组看起来像

optionCollection : MyObj[]
    constructor() {
        let obj1 = new MyObj();
        let obj2 = new MyObj();
        let obj3 = new MyObj();
        this.optionCollection = [obj1,obj2,obj3]
    }

3）在模板中，使用

[(ngModel)]="i.value"

希望这有帮助！

angular 2 - 如何使数组的值与输入值保持同步

2 个答案: