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

使用双花括号插入{{ }}并绑定你的FirstName和LastName.了解更多关于模板语法.

将您的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';
}