模板与原始数组绑定时搜索功能而不改变原始数组？

Question

在我的模板中，我绑定了这个snapShotArray。 snapShotArray 变量正在通过 REST 端点调用填充数据。

<div class="col col-md-4 filter-by-cam">
      <input type="text" name="search" value="search" [(ngModel)]="search" #searchSnaps="ngModel"
        (keyup)="searchSnapshot(search)" />
        <button class="btn btn-primary" [disabled]="!search"
          (click)="searchSnapshot(searchSnaps.value)">Search
        </button>

    </div>

    <div *ngIf="!noData" class="game-board col-md-12">
        <div class="box camera-view-container col-md-3" *ngFor="let item of snapShotArray; let i = index; ">
          <img class="box-img camera-view" id="img{{i}}" src="{{item.image}}" crossOrigin="Anonymous">
          <div class="cam-feed">
            <span> {{item.name}}</span>
            <p>Last captured: {{item.lastCapturedDate}}</p>
          </div>
        </div>
      </div>

Component.ts：

public searchSnapshot(name: string) {
 let b = a.filter(item => item.name === name);
}

问题：

我想要的是搜索snapShotArray 数组并返回一个与用户输入的文本匹配的特定对象。一旦用户清除文本框，将 snapShotArray 替换为所有先前的对象或先前获取数据？

我知道Filter 不会改变原始数组。但是我现在卡住的地方是在将原始snapShotArray 与模板绑定时进行过滤和替换。基本上是客户端的过滤功能。我如何做到这一点？

Answer 1

始终使用管道进行过滤

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'snapshotFilter' })
export class SnapshotFilterPipe implements PipeTransform {
        transform(snapshotArr: [] , searchValue : string) {
        return snapshotArr.filter(snapshot=> {
            snapshot.name === searchValue
        });
    }
}

这里是你的 HTML

<div class="col col-md-4 filter-by-cam">
    <input type="text" name="search" value="search" [(ngModel)]="search" #searchSnaps="ngModel"
        (keyup)="searchSnapshot(search)" />
    <button class="btn btn-primary" [disabled]="!search" (click)="searchSnapshot(searchSnaps.value)">Search
    </button>

</div>

<div *ngIf="!noData" class="game-board col-md-12">
    <div class="box camera-view-container col-md-3" *ngFor="let item of snapShotArray | snapshotFilter : searchValue ; let i = index; ">
        <img class="box-img camera-view" id="img{{i}}" src="{{item.image}}" crossOrigin="Anonymous">
        <div class="cam-feed">
            <span> {{item.name}}</span>
            <p>Last captured: {{item.lastCapturedDate}}</p>
        </div>
    </div>
</div>

在你的组件中

public searchSnapshot(search: string) {
     this.searchValue = search;
}

别忘了在你的应用模块中包含管道

Answer 2

不要使用过滤器，在客户端使用管道。查看 https://angular.io/guide/pipes

<div *ngFor="let hero of (heroes | flyingHeroes)">
  {{hero.name}}
</div>

这是制作方法

import { Pipe, PipeTransform } from '@angular/core';

import { Flyer } from './heroes';

@Pipe({ name: 'flyingHeroes' })
export class FlyingHeroesPipe implements PipeTransform {
  transform(allHeroes: Flyer[]) {
    return allHeroes.filter(hero => hero.canFly);
  }
}

针对您的具体情况：

<div class="box camera-view-container col-md-3" *ngFor="let item of (snapShotArray | searchFilter: searchValue); let i = index; ">

然后在你的组件中设置搜索值。您的过滤器应该非常简单，因为它只会返回过滤后的数组，而不会将其保存在任何地方。