Angular 2更改HTML元素的文本

Question

我想更改 html 元素的文本。

profile.component.html

<div class="col col-sm-12">
  <h2>FirstName LastName</h2>
</div>

profile.component.ts

changeName():void{
        //Code to change the <h2> element
    }

如果你能提供代码示例如何做到这一点，那就太好了！

Answer 1

使用interpolation 和双花括号{{ }} 并绑定你的FirstName 和LastName。阅读有关template syntax 的更多信息。

将您的 html 更改为以下内容：

<div class="col col-sm-12">
  <h2>{{ FirstName }} {{ LastName }}</h2>
</div>

...在你的profile.component.ts：

FirstName: string = '';
LastName: string = '';

changeName():void{
    this.FirstName = 'New First Name';
    this.LastName = 'New Last Name';
}

Answer 2

第1步：-在html文件（profile.component.html）

<div class="col col-sm-12">
  <h2 *ngIf="data==null; else elseBlock" >FirstName LastName</h2>
<ng-template #elseBlock><h2  [innerHTML] = "data"></h2></ng-template>
</div>

第2步：在ts文件（profile.component.ts）

public data:any;
changeName():void{
       this.data="Your Data";
    }