Angular 2 внутренний HTML не работает для тега HTML - PullRequest
Новая
       26

Angular 2 внутренний HTML не работает для тега HTML

0 голосов
/ 18 сентября 2018

У меня есть массив с displayName, в котором содержится тег html: 

this.topicsList = [
{id: "173", name: "Discussion1", displayName: "Discussion1", status: 1},
{id: "174", name: "discussion123", displayName: "discussion123", status: 1},
{id: "192", name: "erer", displayName: "erer", status: 1},
{id: "184", name: "Hussa Test", displayName: "Hussa Test", status: 1},
{id: "194", name: "Ratheesh^TM^", displayName: "Ratheesh<sup> TM </sup>", status: 1},
{id: "181", name: "test test", displayName: "test test", status: 1},
{id: "189", name: "test topic", displayName: "test topic", status: 1},
{id: "195", name: "test^TM^tdtest", displayName: "test<sup> TM </sup>tdtest", status: 1},
{id: "190", name: "topic test", displayName: "topic test", status: 1},
{id: "193", name: "yu", displayName: "yu", status: 1}
]

Я хочу отображать, отображать имя в виде суперскриптовой формы при выводе списка и удалять тег html, но даже если я использую [innerHtml] отображать список имен в виде массива (не работает html-теги). Пожалуйста, помогите мне найти решение. 

<select class="form-control select-topic" id="select-topic-id"  formControlName="topic" [ngModel]="topicSelected || ''"   (ngModelChange)="topicSelected = $event">
  <option value="">Select Topic</option>
  <option *ngFor="let topic of topicsList" value="{{topic.id}}">{{topic.displayName}}</option>
</select>

Я также добавил [innerHtml].Но не решил мою проблему. 

<select class="form-control select-topic" id="select-topic-id"  formControlName="topic" [ngModel]="topicSelected || ''" (ngModelChange)="topicSelected = $event">
  <option value="">Select Topic</option>
  <option *ngFor="let topic of topicsList" value="{{topic.id}}"><div  [innerHtml]="topic.displayName"></div></option>
</select>

1 Ответ

0 голосов
/ 19 сентября 2018

Для HTML-тега «select» [innerHTML] не работает, поэтому displayName не является надстрочным.Вместо тега «Выбрать» используйте «ul» для выпадающего списка.

[Примечание. См. Раскрывающийся список «Bootstrap» для определения стиля раскрывающегося списка.] 

    <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data- toggle="dropdown"><label>Select Manager</label>
          <span class="caret"></span></button>
         <ul class="dropdown-menu">
             <li *ngFor="let topic of topicsList" [innerHTML]="topic.displayName"> </li>
        </ul>
    </div>
...