表达式在代码Angular/TS中不起作用

// 错误的示例
<p>{{ getUserName() }}</p>

// 正确的示例
<p>{{ userName }}</p>

export class MyComponent {
  public userName = 'John Doe';

  public getUserName() {
    return this.userName;
  }
}

export class MyComponent {
  public userName = 'John Doe';
  public userAge = 30;

  public getUserNameAndAge() {
    return `${this.userName} is ${this.userAge} years old.`;
  }
}

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

export class MyComponent {
  public userName = 'John Doe';

  constructor(private cdr: ChangeDetectorRef) {}

  public updateUserName(newName: string) {
    this.userName = newName;
    this.cdr.detectChanges(); // 手动触发变更检测
  }
}

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

@Component({
  selector: 'app-my-component',
  template: `
    <p>{{ userName }}</p>
    <p>{{ getUserNameAndAge() }}</p>
    <button (click)="updateUserName('Jane Doe')">Update User Name</button>
  `
})
export class MyComponent {
  public userName = 'John Doe';
  public userAge = 30;

  public getUserNameAndAge() {
    return `${this.userName} is ${this.userAge} years old.`;
  }

  public updateUserName(newName: string) {
    this.userName = newName;
  }
}