在angular应用程序中过滤后重置javascript数组

Question

我有一个角度应用程序，它显示一个名称列表。我有一个搜索输入来过滤该列表。

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

Answer 1

您在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>

谢谢。

Answer 2

您应该将数组保存在一个中间变量中，如：

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

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