数据绑定

想要在网页中显示类中的数据很简单，以新建的项目为例

首先在组件的类中定义一个名为message的变量，类型是string：

app.component.ts:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
    import { Component, OnInit } from '@angular/core';
    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent {
    title = 'SampleApp';
    message: string = "hello world!";
    }

然后在对应的html中插入一个span标签作为label使用，标签中写入「{{ }}」
然后大打括号中写上变量名即可:

app.component.html:

1
<span>{{ message }}</span>

这个做法就是在类中定义了一个变量，然后在html中显示，效果如下：

hello world