Угловой коврик-автозаполнение с подсветкой труб - PullRequest
Новая
       29

Угловой коврик-автозаполнение с подсветкой труб

1 голос
/ 20 сентября 2019

У меня есть один сценарий, в котором я использую mat-autocomplete с пользовательским каналом выделения.Все работает нормально, проблема возникает, когда я выбираю значение из автозаполнения, а затем пытаюсь сбросить форму, форма сбрасывается, но значение в автозаполнении все еще подсвечивается.

highlight.pipe.ts 

transform(text: string, search): string {
    const pattern = search
      .replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&")
      .split(' ')
      .filter(t => t.length > 0)
      .join('|');
    const regex = new RegExp(pattern, 'gi');
    return search ? text.replace(regex, match => `<b>${match}</b>`) : text;
  }

component.html 

<form class="example-form">
    <mat-form-field class="example-full-width">
        <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
        <span [innerHTML]="state.name | highLight: toHighlight"></span>
                <span></span>
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</form>

Демонстрация Stackblitz

При нажатии кнопки сброса я не хочу выделять какие-либо значения.Есть ли способ исправить эту проблему.

Заранее спасибо

Ответы [ 2 ]

2 голосов
/ 20 сентября 2019

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

1 голос
/ 21 сентября 2019

Вы можете передать несколько аргументов в канал, чтобы вы могли передать значение stateCtrl и добавить его к своему условию, чтобы проверить, существует ли значение и там: 

<span [innerHTML]="state.name | highLight: toHighlight : stateCtrl.value"></span>

, а затем выполнитьдополнительная проверка для этого значения: 

transform(text: string, search: string, ctrlValue: string): string {
  // ....
  return (search && ctrlValue) ? text.replace(regex, match => `<b>${match}</b>`) : text;
}

Ваш раздвоенный STACKBLITZ

...