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標記“選擇”，[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>