Angular 角度2-具有可编辑输入的ngFor对象数组的双向绑定

我是Angular 2的新手，尝试使用可编辑输入实现ngFor对象列表，能够添加新对象并保存数据。 数据如下：

business: { email: "email@something.com", 
locations: [
{ country: "US", city: "city 1", address_line_1: "address 1"},
{ country: "Australia", city: "city 1", address_line_1: "address 2"}
]}

在组件中：

ngOnInit() {
this.businessForm = new FormGroup({
        email: new FormControl(null, [Validators.required]), 
        locationCountry: new FormControl(null)
});
addLocation() {
    this.isFormChanged = true;
    let newLocation = {};
    this.business.locations.push(newLocation);
}

removeLocation(item){
    if (null !== item) {
        this.isFormChanged = true;
        this.business.locations.splice(item, 1);
    }
}

Html:

看起来它将所有输入值更改为最后一个。 我试图通过FormBuilder实现同样的想法，但也没有成功。

我创建了一个。我删除formControlName是因为它不是FormsModule，而是ReactiveFormsModule——这是不同的

有关vs之间的更多信息，请阅读文档。此外，最好删除该值，因为您使用的[ngModel]正在对该值进行双向数据绑定

  <input
                        id="locations-{{index}}"
                        [(ngModel)]="business?.locations[index].country"
                        name="locations-{{index}}"
                        type="text" 
                        class="form-control"
                        placeholder="Country" 
                        aria-label="Country"
                        >

我创造了一个新的世界。我删除formControlName是因为它不是FormsModule，而是ReactiveFormsModule——这是不同的

有关vs之间的更多信息，请阅读文档。此外，最好删除该值，因为您使用的[ngModel]正在对该值进行双向数据绑定

  <input
                        id="locations-{{index}}"
                        [(ngModel)]="business?.locations[index].country"
                        name="locations-{{index}}"
                        type="text" 
                        class="form-control"
                        placeholder="Country" 
                        aria-label="Country"
                        >

---

回答，因为我还不能发表评论。除了@alexKhymenko的答案外，如果您想坚持使用ReactiveFormsModule，您还必须将您在组件中创建的父formGroup businessForm添加到模板中。虽然不确定这是否能解决您的问题，但请尝试将此属性添加到模板的顶部，如下图所示。如果您对非反应形式感到满意，那么@alexKhymenko的回答可能就足够了。

回答，因为我还不允许发表评论。除了@alexKhymenko的答案外，如果您想坚持使用ReactiveFormsModule，您还必须将您在组件中创建的父formGroup businessForm添加到模板中。虽然不确定这是否能解决您的问题，但请尝试将此属性添加到模板的顶部，如下图所示。如果您对非反应形式感到满意，那么@alexKhymenko的回答可能就足够了。

您可以尝试删除该选项吗？让业务定位后？.location我不认为反应式表单适合双向数据绑定，我想您应该尝试使用模板驱动的表单。我只是尝试删除？-相同的错误，再加上一个错误。您可以尝试删除该错误吗？让业务定位后？.location我不认为反应式表单适合双向数据绑定，我想您应该尝试使用模板驱动的表单。我只是尝试删除？-同样的错误再加上一个。谢谢，@alexKhymenko！我可能会继续使用反应形式。问题是有更多的元素与FormsModule一起工作，我希望以相同的方式解决它。@InnaZis请记住不要同时使用它们。快乐编码：-谢谢，@alexKhymenko！我可能会继续使用反应形式。问题是有更多的元素与FormsModule一起工作，我希望以相同的方式解决它。@InnaZis请记住不要同时使用它们。快乐编码：-谢谢，尝试使用此属性，没有帮助。我可能会根据@alexKhymenko的建议重写。谢谢，尝试使用此属性，没有帮助。我可能会根据@alexKhymenko的建议重写。

  <input
                        id="locations-{{index}}"
                        [(ngModel)]="business?.locations[index].country"
                        name="locations-{{index}}"
                        type="text" 
                        class="form-control"
                        placeholder="Country" 
                        aria-label="Country"
                        >