Выделите текст поиска с помощью пользовательского канала (angular2) - PullRequest
Новая
       6

Выделите текст поиска с помощью пользовательского канала (angular2)

0 голосов
/ 18 марта 2020

Я попытался создать пользовательский канал подсветки для небольшого проекта, в консоли нет ошибок, но что-то не так с моим кодом. Я не могу найти проблему, я думаю, что это происходит из HTML файла ..

Спасибо ...

/ highlight.pipe.ts 

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'highlight'
})
export class HighlightPipe implements PipeTransform {
  constructor(public sanitizer: DomSanitizer) {

  }
  transform(value: any, args: any): any {
    if (!args) {
      return value;
    }
    // Match in a case insensitive maneer
    const re = new RegExp(args, 'gi');
    const match = value.match(re);

    // If there's no match, just return the original value.
    if (!match) {
      return value;
    }

    const result = value.replace(re, "<span class='yellow'>" + match[0] + "</span>");
    return this.sanitizer.bypassSecurityTrustHtml(result);
  }
}

/ main.component.ts 

  searchAndMarkIt(search) {
    this.serachTerm = search
    console.log(this.serachTerm)
  }
}

/ main.component. html

<div class="warrper">
    <div class="panel">
        <div class="head">
            <p class="h1">My Cart</p>
            <input type="text" id="search" placeholder="Search..." #search name="search"
                (keyup)="searchAndMarkIt(search.value)">
            <button type="button" [routerLink]="['/shop']" routerLinkActive="router-link-active" mat-button>Back to
                shop</button>
        </div>
        <div class="my-products">
            <div *ngFor="let p of myCart" class="product-warrper">
                <mat-card class="product">
                    <span [innerHTML]="p.prodcut_id.productName | highlight: serachTerm"></span>
                    <!-- <span>{{p.prodcut_id.productName}}</span> -->
                    <span>Price: ₪{{p.price}}</span>
                    <span>Quantity: {{p.quantity}}</span>
                    <span>Sum : {{p.sum}}</span>
                    <img src="../../../assets/public/img/{{p.prodcut_id.image}}" width="50" alt="">
                </mat-card>
            </div>
        </div>
        <mat-card class="total">
            Total: ₪{{total}}
        </mat-card>
    </div>
    <div class="panel">
    </div>
...