时间戳

首页 > 解决方案 > 如何使用带有 Angular 5 和 Material Design 的 innerHtml 更新动态文本

angular - 如何使用带有 Angular 5 和 Material Design 的 innerHtml 更新动态文本

问题描述

我有一个包含动态数据的列表，我想在用户单击按钮时更新特定文本：

<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";
}

标签： angularangular-material

解决方案

迟到的回复，但您可以简单地为您的元素添加内容修饰符，例如：

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

并且在您的代码中更新了一个类变量，例如：

public carName: string;

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

这样，元素的文本将成为您设置变量的任何内容carName。

推荐阅读