组件中的角变量未在模板中呈现

Question

答案：我使用标题：'myTitle'而不是title ='myTitle';（

我刚刚使用一个新组件生成了一个新的Angular应用。问题是当我在类组件内部初始化变量并尝试使用{{}}在模板中将其输出时，它没有显示变量的值。

在主要-App-Root组件中，它的编写方式与我的代码相同，但是它在起作用：（

content.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.sass']
})

export class ContentComponent {
  title: 'Content'
}

content.component.html

<h3>{{title}}</h3>

Answer 1

这是您应该绑定值的方式：

在component.ts中：

public title:any = 'Content';

在component.html中：

<h1> {{title}} </h1>

这是一个有效的示例：demo

Answer 2

如下使用角度变量标题：string =“ Content”例如试试这个，我创建了一个示例MyComponent类，如下所示。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {

  private myVariable:string="Hello World"
  constructor() { }

  ngOnInit() {
  }

}

my-component.component.html

<p>
{{myVariable}}
</p>

确保将上述组件添加到app.component.html中，它是如下所示的自举组件

<app-my-component></app-my-component>

同样在app.module中，如下声明部分中所示

 declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent,
    MyComponentComponent
  ],
  bootstrap: [ AppComponent ]