угловая асинхронная модель массива - PullRequest
Новая
       5

угловая асинхронная модель массива

0 голосов
/ 30 октября 2018 
<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, в представление должна быть добавлена ​​новая пустая модель. Когда я отправлю форму, я смогу получить все модели с обновленными значениями.

1 Ответ

0 голосов
/ 31 октября 2018

На данный момент вы используете асинхронный массив, однако вам нужно поддерживать локальный массив в компоненте, и вы можете изменить его в соответствии с требованиями.

Всякий раз, когда вы получаете модели из API, вы можете обновить локальный массив моделей.

ц 

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

...