在角度应用程序中过滤后重置javascript数组答案

【问题标题】：reset javascript array after filtering in angular application在角度应用程序中过滤后重置javascript数组
【发布时间】：2020-10-27 23:57:05
【问题描述】：

我有一个显示名称列表的 Angular 应用程序。我有一个搜索输入来过滤该列表。

<input [ngModel]="searchStr" (ngModelChange)="modelChange($event)" type="text" id="employeeName">

该组件具有 modelChange() 的逻辑，用于捕获输入字符串并通过该字符串过滤我的姓名。该数据最初来自一个在 ngInit() 中调用的服务。我的问题是每次在输入框中进行击键时，我都会用过滤后的数组覆盖我的名称数组。当输入为空白时，如何编写此逻辑以将数组重置为原始内容？

modelChange(str: string): void {
  debugger;
  this.searchStr = str;

  this.employeeList = this.employeeList.filter(emp => emp.name.includes(this.searchStr));
}

HTML 模板

<div *ngFor="let employee Of employeeList>
    employee.name
</div>

【问题讨论】：

标签： javascript angular

【解决方案1】：

你应该像这样将数组保存在一个中间变量中：

const filtered = [];
const unfiltered = [v1, v2, v3];

最初将值从unfiltered 复制到filtered。过滤后，将 unfiltered 过滤后的值复制到 filtered，然后在需要时还原

【讨论】：

感谢您的帮助！

【解决方案2】：

您正在覆盖 modelChange 中的相同数组，因此如果您想恢复到原始数组（在某些情况下），您必须在某处保留原始数组的引用，或者根本不覆盖原始数组。为显示目的维护另一个数组，假设您将其命名为 displayArr

您的代码会像这样更新

public displayArr:any[] = []
modelChange(str: string): void {
  debugger;
  this.searchStr = str;

  //if some search string is provided, then filter the original array
  if(str)
  {
    this.displayArr = this.employeeList.filter(emp => emp.name.includes(this.searchStr));
  }
  else //if no search string is provided then don't filter the array and return it as it is.
  {
    this.displayArr = this.employeeList;
  }
}

遍历 displayArr 而不是要显示的原始数组。

<div *ngFor="let employee Of displayArr">
    employee.name
</div>

谢谢。

【讨论】：