автозаполнение мат, HTML-код в "displayWith" - PullRequest
Новая
       23

автозаполнение мат, HTML-код в "displayWith"

0 голосов
/ 09 мая 2019

Я использую mat-autocomplete для списка стран, я хочу показать flag + name.

Он работает в mat-autocomplete, но я хочу включить тот же "flag + name"когда пользователь принимает опцию, и есть место, где я не могу это сделать, я думаю, что это решило бы мою проблему, включив в displayWith htmCode. 

 <input type="text" matInput [formControl]="formControl" [matAutocomplete]="auto">
 <mat-autocomplete #auto="matAutocomplete" [displayWith]="inputDisplay" (optionSelected)='onSelectItem($event.option.value)'>
    <mat-option *ngFor="let item of filteredItems | async" [value]="item">
       <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="20px">
         <div class="flags" [ngClass]="item.flagClass"></div>
         <span> {{ item.countryName }} </span>
       </div>
    </mat-option>
  </mat-autocomplete>

Итак, он работает, он печатаетфлаг + страна

enter image description here

Моя проблема в том, что когда я принимаю, я также хочу включить эту структуру, флаг + имя, и она не работает: 

inputDisplay(item?: Country): string | undefined {
   const htmlReturned = '<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="20px">' +
                  '<div class="flags item.flagClass"></div>' +
                  '<span> {{ item.countryName }} </span>' +
                  '</div>';

   return item ? htmlReturned : undefined;
}

С этим кодом у меня есть этот текст во входных данных вместо html-конвертированного кода, возможно ли включить сюда html?

...