如何使用帶有 Angular 5 和 Material Design 的innerHtml 更新動態文本

Question

我有一個包含動態數據的列表，我想在用戶單擊按鈕時更新特定文本：

<mat-list> 
    <mat-list-item *ngFor="let id of ids">
      <mat-radio-group>
        <mat-radio-button name="car" value="honda" id="honda{{id}}" (change)="onChangeCar(id,honda)">Honda</mat-radio-button>
        <mat-radio-button name="car" value="toyota" id="toyota{{id}}" (change)="onChangeCar(id,toyota)">Toyota</mat-radio-button>
      </mat-radio-group>
   </mat-list-item>
<span [id]="id">Text to update</span>
</mat-list>

如何以 Angular 方式動態更新文本？ 我知道如何用舊時尚方式做到這一點，但不建議這樣做：

onChangeCar(id) {
  (<HTMLInputElement>document.getElementById(id)).innerHTML = "new text at a 
  specific Id";
}

Answer 1

代替

<span [id]="id">Text to update</span> 

和

<span >{{newVal}}</span>

並在您的組件中創建一個變量以與 newVal 綁定

Answer 2

遲到的回復，但您可以簡單地向您的元素添加一個內容修飾符，例如：

<span [innerHTML]="carName"></span>

並且在您的代碼中更新了一個類變量，例如：

public carName: string;

onChangeCar(newName) { 
   this.carName = newName;
}

這樣，元素的文本將成為您設置變量carName任何內容。