我在屏幕上看到过滤后的数据，但是当我清除输入时，原始数据没有出现

Question

我在屏幕上看到过滤后的数据，但当我清除输入时，原始数据没有出现

这里我将

_todayShare

标签中的

<a\>

按顺序显示为项目

 

<span>Share</span>
        <input
          [(ngModel)]="sharedsearchText"
          (keyup)="applyFilter(sharedsearchText)"
          style="width: 50%; margin-top: 1px; margin-bottom: 1px;"
          matInput
          placeholder="Ara..."
        />
      </div>
      <div class="list" slim-scroll [slimScrollOptions]="{ height: 450 }">
        <a
          *ngFor="
            let item of _todayShare | keyvalue : valueAscOrder;
            let i = index
          "
          style="cursor: pointer"
          class="transition"
          (click)="showliveRss(item)"
        >

_todayShare 是一张地图，正如您所理解的，我在下面复制了它，但它再次不起作用。

_todayShare: Map<string, any> = new Map<string, any>();


ngOnInit() {
        this._todayShare = new Map<string, any>();
....


applyFilter(value: string) {
    
    const filterValue = value.trim().toLowerCase();
    const filteredMap = new Map<string, any>();
    const _todayShareBackup = new Map<string, any>(this._todayShare)

    _todayShareBackup.forEach((item, key) => {
      if (key.toLowerCase().includes(filterValue) ||
        JSON.stringify(item).toLowerCase().includes(filterValue)) {
        filteredMap.set(key, item);
      }
    });
    this._todayShare = filteredMap
  }

当我清除此处的输入时，我希望所有数据如下

Answer 1

这里的问题是

applyFilter

函数，其中

_todayShare

被过滤结果覆盖，当过滤器被清除时，它不会恢复原始数据，您需要在过滤之前备份原始数据，所以当您重新过滤它不适用于之前过滤的数据，而是适用于原始数据。

export class YourComponent implements OnInit {
  _todayShare: Map<string, any> = new Map<string, any>();
  _originalTodayShare: Map<string, any>; // This will store the original data

  ngOnInit() {
    this._todayShare = new Map<string, any>();
    this._originalTodayShare = new Map<string, any>(this._todayShare);
    // Load your _todayShare data here and then make a copy to _originalTodayShare
  }

  applyFilter(value: string) {
    if (!value.trim()) {
      // If there is no input, restore the original data
      this._todayShare = new Map<string, any>(this._originalTodayShare);
      return;
    }

    const filterValue = value.trim().toLowerCase();
    const filteredMap = new Map<string, any>();

    this._originalTodayShare.forEach((item, key) => {
      if (key.toLowerCase().includes(filterValue) ||
        JSON.stringify(item).toLowerCase().includes(filterValue)) {
        filteredMap.set(key, item);
      }
    });

    this._todayShare = filteredMap;
  }
}