数据绑定在角度4中不起作用

Question

这可能太基础了，但是我还没弄清楚。

我正在使用angular4。在“ app”文件夹中有一个名为Competitions的文件夹。

在这里，我有如下的Competitions-detail.component.ts文件：

import { Component }  from '@angular/core'

@Component({
  moduleId: module.id,
  selector: 'competitions-detail',
  templateUrl: 'competitions-detail.component.html',
  styleUrls: [ 'competitions-detail.component.css' ]
})

export class CompetitionsDetailComponent {
    title: 'Competencias';
}

然后我有我的模板文件：

<md-toolbar color="primary">
  <md-icon>data_usage</md-icon>
  <span><strong>LA M10</strong></span>
  <span class="spacer"></span>
  <span><strong>COMPETENCIAS</strong></span>
</md-toolbar>

<h1>COMPETENCIAS</h1>
<h1>{{title}}</h1>
<h2>COMPETENCIAS</h2>
<h2>{{title}}</h2>

这就是结果

如您所见，该模板运行良好，如果我对显示的值进行硬编码，甚至还有一些材料设计组件，但是由于某种原因，简单的数据绑定{{}}不会显示标题值。

我想念什么？

Answer 1

您正在分配类型，而不是实际设置字段：

title: string = 'Competencias';

使用方式，请确保字段title只能具有字符串值： Compentencias

Answer 2

类不是对象。 应该是=而不是：

export class CompetitionsDetailComponent{
    title = "Competencias";
 }

Answer 3

尝试

出口类CompetitionsDetailComponent {title ='Competencias'; }

代替

出口类CompetitionsDetailComponent {标题：'Competencias'; }

Answer 4

我认为变量赋值和声明有问题。

title：字符串='Competencias'

Answer 5

变量赋值应为=而不是：

export class CompetitionsDetailComponent{
    title = "Competencias";
}