Выделите карты CSS при поиске в угловых

Question

У меня есть массив предметов, которые отображаются в интерфейсе как карты угловых материалов.У меня есть окно поиска, где пользовательский ввод для элементов.как только поиск реализован, я получаю searchItems как другой массив.Теперь я хочу выделить (изменяя цвет фона карты или прямоугольную анимацию) элементы массива угловых карт материалов, которые сопоставляются с искомыми элементами.Я застрял в реализации этой части CSS, хотя я могу отрисовать и сопоставить элементы с searchdItems

 <div *ngIf="searchedItems">
      <div class="alert alert-danger alert-dismissible" *ngIf="searchedItems.length === 0">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times </a>
        <strong>{{data.value}}</strong> not found
      </div>
      <div *ngIf="searchedItems.length > 0" class='searchitem'>
        {{data.value}} found in
        <div *ngFor="let item of searchedItems; let i = index">
          {{item}} {{i}}
        </div>


      </div>

    </div>

    <mat-grid-list cols="3" rowHeight="100px">
    <div *ngFor="let item of items; let x = index">
          <mat-grid-tile [ngClass]="item.name == item ? 'searchexample-card': 'example-card'" routerLink="/inventory/items/{{item.name}}">
            <mat-card>
              <mat-card-header>
                <b>Item{{item.name}}</b>
              </mat-card-header>
            </mat-card>
          </mat-grid-tile>
        </div>

      </mat-grid-list>

Answer 1

Вы можете сделать это, используя трубу из Angular

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

@Pipe({
  name: 'highlight',
  pure: false
})
export class HighlightPipe implements PipeTransform {
  transform(items: any, search: string, clip: boolean): any {
    const regex = new RegExp(search, 'ig');
    if(Array.isArray(items) && search) {
      for(let item of items) {
          item.highlight = regex.test(item.label);
      }
    }
    return clip ? items.filter(item => item.highlight) : items;
  }
}

Я передал поисковый запрос в трубе, и полный массив всегда возвращался из трубы, но с использованием регулярного выражения или, возможно, вашего пользовательскогоЛогика поиска: добавьте еще один атрибут к элементу списка highlight логический, который имеет значение true, если ваша логика говорит, что он соответствует элементу, иначе false

Я изменил массив элементов с string[] до {label:string, highlight?:boolean}[], чтобы он соответствовализменение канала, поэтому вместо этого мы используем массив как

items: {label:string, highlight?:boolean}[] = [
  {label: 'INDIA'},
  {label: 'USA'},
  {label: 'RUSSIA'},
  {label: 'UK'},
  {label: 'ITALY'},
];

Теперь для всех помещаем его в шаблон

<div 
  *ngFor="let item of items | highlight: search" 
  [ngClass]="{highlight: item.highlight, card: true}"
>
  {{item.label}}
</div>

Здесь при поиске, совпадает ли он с каким-либо элементомМассив from items будет иметь атрибут highlight:true как true, а также добавляет класс с именем 'highlight` к вашей существующей карте div.card, поэтому в css определение карты подсветки как

.card.highlight{
  background-color: yellow;
}

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

search: string;

devicesearch(input) {
  this.search = input;
}

Edit 2:

Если вы хотели обрезанный массив, вы можете использовать Pipe в своем классе, чтобы получить обрезанный массив

search: string;
searchedItems: any[];
highlightPipe = new HighlightPipe();

devicesearch(input) {
  this.search = input;
  this.searchedItems = this.highlightPipe.transform(this.items, input, true);
  // only names --> const names = this.searchedItems.map(item => item.label);
}

Обновлен StackBlitz для вашей справки: https://stackblitz.com/edit/angular-usswkn

Answer 2

Если вы не можете изменить массив элементов, я изменил ответ для канала, который не повлияет на ваш исходный массив

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

@Pipe({
  name: 'highlight', pure: false
})
export class HighlightPipe implements PipeTransform {

  transform(items: any, filtered?: any[]): any {
    let newArray = [];
    if(Array.isArray(items) && Array.isArray(filtered)) {
      for(let item of items){
        newArray.push({label: item, highlight: filtered.indexOf(item)>-1})
      }
    } else {
      newArray = items.map(item => ({label: item}));
    }
    console.log(newArray)
    return newArray;
  }

}

Но ваш HTML-шаблон будет изменен для размещения выделения

<div *ngFor="let item of items | highlight: searchedItems" [ngClass]="{card: true, highlight: item.highlight}">
  {{item.label}}
</div>

Здесь я передаю массив, который у вас есть после поиска searchedItems, в мой основной список. Pipe

Надеюсь, что это ответ на ваш вопрос

Обновлен Stackblitz: https://stackblitz.com/edit/angular-oyhva7

Answer 3

Проблема связана с условием, которое вы реализовали для активации [ngClass].Вы сравниваете объект со свойством объекта, это сравнение для item с item.name всегда будет возвращать false.

считают, что у вас есть результат поиска в массиве seekItems [] .Теперь вы хотите выделить эти элементы в цикле целых элементов.тогда ваш код должен выглядеть примерно так:

 <div *ngFor="let item of items; let x = index">
    <mat-grid-tile [ngClass]="item in searchedItems ? 'searchexample-card': 'example-card'">
        <mat-card>
           <mat-card-header>
              <b>Item{{item.name}}</b>
          </mat-card-header>
       </mat-card>
    </mat-grid-tile>
 </div>

Учитывая, что массив элементов и искомые элементы [] одного типа.