[英]How to update dynamic text using innerHtml with Angular 5 and Material Design
我有一个包含动态数据的列表,我想在用户单击按钮时更新特定文本:
<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";
}
代替
<span [id]="id">Text to update</span>
和
<span >{{newVal}}</span>
并在您的组件中创建一个变量以与 newVal 绑定
迟到的回复,但您可以简单地向您的元素添加一个内容修饰符,例如:
<span [innerHTML]="carName"></span>
并且在您的代码中更新了一个类变量,例如:
public carName: string;
onChangeCar(newName) {
this.carName = newName;
}
这样,元素的文本将成为您设置变量carName
任何内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.