Question

在一个组件中，我可以使用以下方法过滤我的数组：

<h3>Name</h3>

<ul class="testClass" style=" padding-left:0px; margin-bottom:0px;">
  <li>
    <input type="text" name="name" id="myText">
  </li>
</ul>

<ul class="dropDown" style="max-height:200px; overflow-y:scroll; margin-top:2px;">
  <li class="rowClass" style=" max-width:400px; min-width:400px; ">
    <label>  
      <input type="checkbox" id="check" value="0"> Select All
    </label>
    <input type="button" value="Go" style="float:right;">
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test      
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test1
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test2
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test3
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test4
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test5
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test5
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test5
    </label>
  </li>
  <li class="rowClass" style=" max-width:400px; min-width:400px;">
    <label>          
      <input type="checkbox" name="allClass" class="checkBoxClass"> Test5
    </label>
  </li>
</ul>

产品的价值与第一个值相同，但过滤后的值存储在// Array of product objects const result = products.filter(p => p.name.includes('val'));。

但是在下面的代码中，result过滤了字符串数组：

filter()

问题是如何在不修改// Array of strings const result = strs.filter(s => s.includes('val'));本身的情况下过滤字符串并返回结果？

注意：我尝试使用strs，但未做任何更改。

Answer 1

它返回已过滤的数据，不会更改实际数组。你做错了什么

const strs = ['valval', 'bal', 'gal', 'dalval'];
const result = strs.filter(s => s.includes('val'));

console.log(strs);
console.log(result);

Answer 2

首先需要知道的是，如果我们过滤列表，则会丢失原始数据

products: any[] = [
 {
  "productId": 1,
  "productName": "foo-bar",
  "price": 32.99
 }
]

，并且如果不从源中重新获取数据就无法取回它，因此我们必须创建另一个列表来存储过滤后的列表。

 filteredProduce: any[];

接下来，如果您要在网格上显示已过滤产品的列表或类似内容，我们需要一种方法来知道用户何时更改过滤条件。我们可以使用事件绑定并监视按键或值的更改，但是更简单的方法是将_listFilter属性更改为getter和setter，就像这样

get listFilter: string {
    return this._listFilter;
}
set listFilter(value:string) {
    this._listFilter= value;
}

接下来，我们要将我们的filteredProducts数组设置为此类产品的过滤列表

set listFilter(value:string) {
    this._listFilter= value;
    this.filteredProducts = this._listFilter? this.performFilter(this._listFilter) : this.products;
}

在前面的代码中，我们使用js条件运算符来处理_listFilterstring为空，空或未定义的可能性。接下来，我们使用this.performFilter(this._listFilter)来过滤列表。

performFilter(filterBy: string): any[] {
    filterBy = filterBy.toLocaleLowerCase();
    return this.products.filter((product: any) =>
        product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
}

最后，我们应该将产品的主列表分配给filterProducts，并将_listFilter分配给我们想要的东西。

constructor() {
        this.filteredProducts = this.products;
        this._listFilter= 'foo-bar';
    }

最后一步是更改我们的模板以绑定到我们的filterProducts属性。

Angular 2 Component中的Array.filter（）

2 个答案: