Angular переменная в компоненте не отображается в шаблоне

Question

Ответ: Я использовал title: '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>

Вот рабочий пример : демо

Answer 2

Используйте переменную angular, как показано ниже title: 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 ]