Angular中如何将数组恢复为初始值？

核心问题 #

你的代码存在三个关键错误导致重置功能失效：

1. 异步数据赋值时机错误：firstDataValue在API请求返回前就被赋值，此时filteredProductList还未初始化，值为undefined
2. Option值类型错误：将数组作为<option>的value，HTML会把数组转为"[object Object]"这类无效字符串，过滤时无法匹配任何分类
3. 重置逻辑缺失：未针对Reset选项做特殊处理，无论选什么都执行过滤操作，导致重置时返回空数组

修正后的代码 #

HTML部分

<div>
    <select
      formControlName="category"
      (change)="filterProductsCategorySelectOption()">
      <!-- 给Reset选项设置明确的空值，便于后续判断 -->
      <option value="">Reset</option>
      <option
        *ngFor="let category of allProductsCategories"
        [value]="category"
      > {{category}} </option>
    </select>
  </div>

  <div *ngFor="let product of filteredProductList" class="different"></div>

TypeScript部分

import { FormGroup, FormControl } from '@angular/forms';
// 导入你的ProductService等依赖

public allProductsCategories: string[] = ["electronics", "jewelery", "men's clothing", "women's clothing"]
public allProductList: any[] = [];
public filteredProductList: any[] = [];

ngOnInit(): void {
   this.form = new FormGroup({
     // 表单初始值设为空，对应Reset选项
     category: new FormControl(''),
   })

   this.productService.getAllProducts().subscribe(value => {
     // 保存原始数据到allProductList
     this.allProductList = value;
     // 用扩展运算符复制初始数据到过滤列表，避免引用关联
     this.filteredProductList = [...this.allProductList];
   });
}

public filterProductsCategorySelectOption(): void {
   const categoryOptionValue = this.form.controls['category'].value;
   
   // 判断是否为重置操作
   if (!categoryOptionValue) {
     // 重置为原始数据的副本
     this.filteredProductList = [...this.allProductList];
   } else {
     // 执行正常过滤逻辑
     this.filteredProductList = this.allProductList.filter(el => el.category === categoryOptionValue);
   }
}

关键优化点 #

• 用空字符串作为Reset选项的标识，避免复杂的类型转换问题
• 始终保留原始数据在allProductList中，重置时直接从原始数据复制，确保数据准确性
• 表单初始值与Reset选项对应，页面加载时默认显示重置状态

内容的提问来源于stack exchange，提问作者Alexandr Boroshenko