Angular2 + отображать данные из хранилища в поле динамического ввода - PullRequest
Новая
       24

Angular2 + отображать данные из хранилища в поле динамического ввода

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

У меня есть массив данных.Что я хочу от представления, так это иметь поле ввода для количества объектов в массиве, и когда страница обновляется, что бы она ни сохранялась в полях ввода, тогда это значение отображается как значение в поле ввода.

data - [{value: 'value1', timeTitle: ''}, {value: 'value2', timeTitle: ''}]

HTML 

<div>
            <ion-item>
                <ion-label>Select Date</ion-label>
                <ion-datetime min={{minDate}} displayFormat="MM/DD/YYYY" [(ngModel)]="myDate" formControlName="dateTime"></ion-datetime>
            </ion-item>
            <ion-list *ngFor="let detail of details; let i=index" formArrayName="times">
                <ion-item [formGroupName]="i">
                    <ion-label>{{detail.timeTitle}}</ion-label>
                    <ion-datetime displayFormat="h:mm A" formControlName="time"></ion-datetime>
                </ion-item>
                <ion-item>
                    <ion-label>{{detail.purpose}}</ion-label>
                </ion-item>
            </ion-list>
</div>

<button ion-button full (click)="next()" [disabled]="!timeForm.valid">Next</button>

TS 

ngOnInit() {

this.timeForm = this.formBuilder.group({
      dateTime: [''],
      times: this.formBuilder.array([this.createTime()])
    })

this.addTimes()

this.storage.get('saveTimes').then(res => {
    //DO STUFF HERE 
})

}

createTime(): FormGroup{
    return this.formBuilder.group({
      time: ['', Validators.required]
    })
  }

  addTimes() {
    const time = this.createTime()
    this.times.push(time)
  }

  get times(): FormArray {
    return this.timeForm.get('times') as FormArray
  }

next() {
this.times = {
      requestedTime1: this.timeForm.value.times[1],
      requestedTime2: this.timeForm.value.times[0]
    }

this.storage.set('saveTimes', this.times)
}

1 Ответ

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

Это было бы довольно простым решением.

  1. Любое изменение в поле ввода запускает функцию save.
  2. Save Функция в основном преобразует array встрока JSON.stingify() и сохранение в Cookie или Session Storge.
  3. Всякий раз, когда пользователь обновляет страницу.Компонент будет повторно инициализирован и вызовет функцию ngOnInit.
  4. В функции ngOnInit прочитайте содержимое из Cookie.
  5. Преобразовать cookie string обратно в arrayиспользуя JSON.parse()
  6. Наконец, вы можете присвоить эти массивы исходному массиву в вашем классе.
...