Angular 阵列的角度异步模型 添加 提交

我想要实现的是：

如果模型为空，则视图应为模型的每个属性显示2个空输入。当我提交表单时，

onSubmit（model）

应该给我一个虚拟模型，上面有我刚刚在表单中输入的值

如果模型不是空的，那么表单会显示所有模型，提交事件会给出所有具有更新值的模型

当我单击

Add

按钮时，一个新的空模型应该添加到视图中。当我提交表单时，我应该能够获得所有具有更新值的模型

---

到目前为止，您正在使用异步阵列，但是您需要在组件中维护本地阵列，并且可以根据需要对其进行修改

无论何时从API获取模型，都可以更新本地模型数组

ts

从'@angular/core'导入{Component}；
从'rxjs'导入{可观察的}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
名称='角度'；
模型=[]；
最小值=2；
getModels（）{
让need=this.min—this.models.length；
如果（需要>0）{
for（设i=0；i{
该模型=响应；
});
}
addModel（）{
this.models.push（this.getEmptyModel（））；
}
onSubmit（）{
log（this.models）；
}
getEmptyModel（）{
返回{data1:，data2:}
}
getModelsFromAPI（）{
返回（[
{
“数据1”：“AA”，
“数据2”：“BB”
}
])
}
}

html

添加
提交
获取数据

---

这是根据要求提供的示例应用程序-

您可能需要查看。这里有

FormArray

，可以满足您的需要。包括您的tsfile@muradm我个人不喜欢用代码操纵GUI。@SunilSingh我的

ts

文件没有任何奇特的东西。

model$

是组件类的属性and所有函数都是存根。@Antepolivian，你说的“用代码操纵GUI”是什么意思？我会改进这一点，在

*ngFor

中使用函数调用不是很好的主意，也可能是不好的做法。这将对Angular的更改检测产生负面影响和意外行为。@muradm-是的，在重复部分调用函数不是一个好主意，但是它不会对Angular CD进程产生任何影响。不建议这样做由于性能原因，ded，但根据当前的实现，不会有任何问题。当然，对于这种特定情况，不会有任何问题，只是传播不良做法，IMO，特别是对于新来者和复制粘贴者：）@SunilSingh感谢您的演示。但我不会单击按钮获取新数据。从您的代码看，似乎我可以不在模板中加入异步数组？我总是要订阅可观察数组，自己构造一个普通数组？@muradm我无法让异步数组工作，所以我想看看专家们是如何处理它的。你这样判断人是不礼貌的。我在这里放的代码甚至与我一直在编写的代码不太接近。复制和粘贴根本就不会成功为我工作！

<form (ngSubmit)="onSubmit(model)" #modelForm="ngForm">
    <div *ngFor="let model of model$ | async">
        <input name="{{model.id}}data1" [(ngModel)]="model.data1" />
        <input name="{{model.id}}data2" [(ngModel)]="model.data2" />
    </div>
    <button type="button" (click)="addModel()">Add</button>
    <button type="submit">Submit</button>
</form>

import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  models = [];
  min = 2;

  getModels(){
    let need = this.min - this.models.length;
    if(need > 0){
      for(let i=0; i<need; i++){
         this.models.push(this.getEmptyModel());
      }
    }
    return this.models;
  }

  fetchData(){
    this.getModelsFromAPI().subscribe(response=>{
         this.models = response;
      });
  }

  addModel(){
    this.models.push(this.getEmptyModel());
  }

  onSubmit(){
    console.log(this.models);
  }



  getEmptyModel(){
    return {data1 : "", data2 : ""}
  }

  getModelsFromAPI(){
   return of( [
   {
    "data1": "AA",
    "data2": "BB"
   }
   ])
  }

}

<form (ngSubmit)="onSubmit()" #modelForm="ngForm">
    <div *ngFor="let model of getModels(), let i = index">

        <input name="data1{{i}}"  [(ngModel)]="model.data1" />
        <input name="data2{{i}}"  [(ngModel)]="model.data2" />
    </div>
    <button type="button" (click)="addModel()">Add</button>
    <button type="submit">Submit</button>
    <button type="button" (click)="fetchData()">Fetch Data</button>
</form>