阵列角度异步模型

Question

<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>

我想要实现的是：

1. 如果模型为空，则视图应为模型的每个属性显示2个空输入。当我提交表单时，onSubmit(model)应该为我提供一个虚拟模型，其中包含我刚刚在表单中输入的值。

2. 如果模型不为空，则表单将显示所有模型，并且Submit事件应为我提供所有具有更新值的模型。

3. 当我单击Add按钮时，应将新的空模型添加到视图中。提交表单时，我应该能够获取所有具有更新值的模型。

Answer 1

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

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

ts

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"
   }
   ])
  }

}

html

<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>

以下是根据要求的示例应用程序-https://stackblitz.com/edit/angular-qnbtdb