下面的代码 ( https://stackblitz.com/edit/angular-ivy-s3ixx8 ) 工作，保存到本地存储，并显示其中的所有数据（产品数量）。
问题是这样的：当我重新加载页面时，我无法编辑这些数据。也就是说，当我点击“+”或“-”，然后我提交时，商品数量仍然保持不变。
app.component.ts：
form: FormGroup;
productsFormArray: FormArray;
localStorageData = [];
constructor() {
this.form = new FormGroup({
products: new FormArray([])
})
this.productsFormArray = this.form.get('products') as FormArray;
// get data from localStorage
this.localStorageData = JSON.parse(localStorage.getItem('dataSource'));
// if localStorage is not empty
if (this.localStorageData != null) {
console.log(this.localStorageData);
this.localStorageData.map((x, i) =>
this.productsFormArray.controls.push(new FormControl(x)));
}
}
// add new product
add() {
(this.form.get('products') as FormArray).push(new FormControl(0));
}
// count quantity of product
count(n: number, i: number) {
var value = this.productsFormArray.at(i).value;
value += n;
this.productsFormArray.at(i).setValue(value);
}
onSubmit() {
console.log(this.form.value);
}
saveToLocalStorage() {
localStorage.setItem('dataSource',
JSON.stringify(this.form.value.products));
}
您在构造函数中错误地初始化
FormArray，但正确添加到add. fieldcontrols，虽然名义上是一个数组，但不能直接推入其中。