Блог

Я хочу применить фильтр к заголовкам моих сохраненных данных, но структура моих отфильтрованных данных после фильтрации не совпадает. «Ключ» моих данных удаляется фильтром и заменяется индексом.

Ссылка на репозиторий: https://github.com/Mobize/BlocNote/blob/fdb5a4e60a0094cb0d5cc80e80a3e3ffcf9347ae/src/app/single-section/single-section.component.ts#L88

Вот моя структура базы данных: Структура базы данных

Мои элементы перед фильтрацией: Перед фильтрацией

После фильтрации: После фильтрации

Мой код компонента:

 filter(query: string) {
    this.filteredItems = (query) ?
    Object.values(this.items).filter(p=>p.title.normalize("NFD").replace(/[u0300-u036f]/g, "")
    .toLowerCase().includes(query.toLowerCase())) :
    this.items; 
}
  

Мой шаблон:

 <input #query (keyup)="filter(query.value)" type="text" class="form-control search" placeholder="Recherche...">
<mat-list-item id="item_list" *ngFor="let item of filteredItems | keyvalue ; let i = index" [class.changeColor]="item.key == selectedValue">
  <a (click)="openItem(item, item.key)" *ngIf="item.value.title" matLine><mat-icon [class.yellow]="item.key == selectedValue">code</mat-icon>{{item.value.title}}</a>
  <button mat-icon-button>
    <mat-icon id="edit_item_icon" (click)="onEditItem(item)">edit</mat-icon>
    <mat-icon (click)="openDialog(item.key, item.value.title)">delete_sweep</mat-icon>
 </button>
</mat-list-item>
  

поэтому, когда я нажимаю на элемент, чтобы отредактировать его после фильтрации, он создает новый элемент….

Просмотрите ее и отфильтруйте с помощью indexOf() :

 filter(query: string) {
    const result: object = {};

    for (let key in this.items) {
      const data = this.items[key];

      if (this.items.hasOwnProperty(key) amp;amp; data.title amp;amp;
        data.title.normalize("NFD").replace(/[u0300-u036f]/g, "").indexOf(query) !== -1) {
        result[key] = data;
      }
    }

    this.filteredItems = Object.keys(result).length ? result : this.items;
}
  

Я настоятельно рекомендую вам перенести this.filteredItems назначение в ngZone.run() , если вы используете в dom:

 this.ngZone.run(() => {
      this.filteredItems = Object.keys(result).length ? result : this.items;
});
  

Не забудьте импортировать службу в свой конструктор с constructor(private ngZone: NgZone)