Question

我需要将我们在表单中输入的所有表单值存储在本地存储中。为此，我要设置表单值并在获取该表单数据后推送表单值。但是，当我尝试推送数据时，它总是被新输入的表单数据替换。我需要组件中的所有表单值。我该怎么办？

input.html

<form [formGroup]="messageForm" (ngSubmit)="onSubmit()">
<input type="text" class="form-control" id="initiativename" formControlName="initiativename">
<input type="text" class="form-control" id="yearoflaunch" formControlName="yearoflaunch">
<input type="text" class="form-control" id="country" formControlName="country">
</form>

input.ts

import { Component, OnInit, ViewContainerRef } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { DataService } from "src/app/earlysizing/data.service"

import { LocalStorageService, SessionStorageService, LocalStorage, SessionStorage } from 'angular-web-storage';
@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss']
})
export class inputComponent implements OnInit {
  messageForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private _emp: DataService;
    public local: LocalStorageService,
    public session: SessionStorageService
  ) {  }

  ngOnInit() {
    this.messageForm = this.formBuilder.group({
      initiativename: ['', [Validators.required],
      yearoflaunch: ['', Validators.required],
      country: ['', Validators.required],
    });
  }

  onSubmit() {
    if (this.messageForm.invalid) {
      return;
    }
    else{
      this.local.set('inputs', {...this.messageForm.value});
    }
  }
}

existing.component.ts：

import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/earlysizing/data.service';
import { LocalStorageService, SessionStorageService, LocalStorage, SessionStorage } from 'angular-web-storage';

@Component({
  selector: 'app-existing',
  templateUrl: './existing.component.html',
  styleUrls: ['./existing.component.scss']
})

export class ExistingForecastComponent implements OnInit {

  constructor(private _emp : DataService, private local: LocalStorageService, private session: SessionStorageService) { }

  private existingForecasts : any = [];


  ngOnInit() {
      this._emp.setMyGV('Existing Forecast');
      const sessionData = this.local.get('inputSelections');
      console.log('sessionData',sessionData);
      this.pushData(sessionData);
    }

    pushData(x:any)
    {
      this.existingForecasts.push(x);
      console.log('existingForecasts',this.existingForecasts);
    }

}

existing.component.html：

<div class="container-fluid">
<table class="table table-bordered">
  <thead>
    <tr>
        <th scope="col">Initiative Name</th>
        <th scope="col">Country</th>
        <th scope="col">Year Of Launch</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let e of existing">
      <td>{{e.initiativename}}</td>
      <td>{{e.country}}</td>
      <td>{{e.yearoflaunch}}</td>
    </tr>
  </tbody>
</table>
</div>

在这里this.existing始终被新输入的表单数据替换。我需要存储多次在表单中输入的所有数据。怎么做？我的代码有什么问题？

Answer 1

每次您导航到 existing.component.ts 时，它都会重新呈现。即existingForecasts属性将成为一个空数组。因此，当您从localStorage推送值时，只有新值可用。要解决此问题，您可以使用服务，它们是单个对象

例如，我将使用您的一项名为DataService的服务。我将在您的DataService中声明一个属性

data.service.ts

public existingForecasts: any = [];

existing.component.ts：

import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/earlysizing/data.service';
import { LocalStorageService, SessionStorageService, LocalStorage, SessionStorage } from 'angular-web-storage';

@Component({
  selector: 'app-existing',
  templateUrl: './existing.component.html',
  styleUrls: ['./existing.component.scss']
})

export class ExistingForecastComponent implements OnInit {

  constructor(private _emp : DataService, private local: LocalStorageService, private session: SessionStorageService) { }

  ngOnInit() {
      this._emp.setMyGV('Existing Forecast');
      const sessionData = this.local.get('inputSelections');
      console.log('sessionData',sessionData);
      this.pushData(sessionData);
    }

    pushData(x:any) {
      this._emp.existingForecasts.push(x);
      console.log('existingForecasts',this._emp.existingForecasts);
    }

}

Answer 2

您应该声明一个数组并推送新输入的表单条目数据

var existing = [];

existing.push(newData);

表单数据始终被新输入的表单值覆盖

2 个答案: