Angular 2内部html不适用于html标记

Question

我有一个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>

Answer 1

对于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>