Question

我有一个数据数组。从视图中我想要的是在数组中的对象数上有一个输入框，并且刷新页面时，无论将什么保存到输入框中，然后该值都将显示为输入字段中的值。

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

Answer 1

那将是非常简单的解决方案。

在输入框中进行任何更改，都会触发save功能。
Save函数基本上将array通过JSON.stingify()转换为字符串，并保存到Cookie或Session Storge中。
每当用户刷新页面时。组件将重新初始化并调用ngOnInit函数。
在ngOnInit函数中，从Cookie中读取内容。
使用string将Cookie array转换回JSON.parse()
最后，您可以将这些数组分配给班级中的原始数组。

Angular2 +将数据从存储显示到动态输入字段中

1 个答案: