如何绑定Angular 2表达式和TypeScript方法？

我想做的是在输入名字和姓氏时显示全名

这项工作：

<h1 [hidden]="!firstName || !lastName">Hello {{lastName + ', ' + firstName}}!</h1>

这个

显示全名

应该是

<button (click)="alertFullName()">show full name</button>

fullName():string {
    return this.firstName + ', ' + this.lastName;
}
alertFullName() {
   alert(this.firstName + ', ' + this.lastName);
}

显示全名

这对我来说很好

<h1 [hidden]="!firstName || !lastName">Hello {{fullName()}}!</h1>

你好{{{fullName（）}}！

---

（我必须更改

“！firstName | |！lastName”

表达式，因为我使用了Dart，因此

null

检查必须是显式的）

如果我们查看文档，我们可以看到

{bindMe}

形式的插值只能绑定到属性：

表达式只能用于绑定到属性。表达式表示应如何将数据投影到视图。表达式不应该有任何副作用，应该是幂等的

这意味着以下示例是“非法”的，因为它表示函数调用：

<h1 [hidden]="!firstName || !lastName">Hello {{fullName()}}!</h1>

然后在模板中使用

fullName

：

<h1 [hidden]="!fullName.length">Hello {{fullName}}!</h1>

你好{{fullName}！

除了@Günter Zöchbauer所写的内容（即使用

（点击）

，而不是

ng点击

），此代码

function fullName(): string {
   return firstName + ', ' + lastName;
}
function alertFullName() {
  alert(firstName + ', ' + lastName);
}

应该是

<button (click)="alertFullName()">show full name</button>

fullName():string {
    return this.firstName + ', ' + this.lastName;
}
alertFullName() {
   alert(this.firstName + ', ' + this.lastName);
}

在插值部分：“表达式可以调用宿主组件的方法，就像我们在这里使用

getVal（）

”所做的那样。”。因此，我认为在组件上调用方法并不违法。

<h1 [hidden]="!firstName || !lastName">Hello {{fullName()}}!</h1>

export class HelloWorld {
  firstName: string = '';
  lastName: string = '';
  get fullName () {
      return firstName + ' ' + lastName;
  }
}

<h1 [hidden]="!fullName.length">Hello {{fullName}}!</h1>

function fullName(): string {
   return firstName + ', ' + lastName;
}
function alertFullName() {
  alert(firstName + ', ' + lastName);
}

fullName():string {
    return this.firstName + ', ' + this.lastName;
}
alertFullName() {
   alert(this.firstName + ', ' + this.lastName);
}