Question

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

这有效：

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

这不起作用（调用类中定义的方法的正确方法是什么？）：

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

这也不起作用：

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

以下是文件：的index.html：

<!DOCTYPE html>
<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'src': {defaultExtension: 'ts'}} 
      });
    </script>

    <!-- 3. Bootstrap -->
    <script>
      System.import('angular2/platform/browser').then(function(ng){
        System.import('src/hello_world').then(function(src) {
          ng.bootstrap(src.HelloWorld);
        });
      });
    </script>

  </head>

  <!-- 4. Display the application -->
  <body>
    <hello-world>Loading...</hello-world>
  </body>

</html>

的src / hello_world.html：

<label>Name:</label>
<input type="text" [(ngModel)]="firstName" placeholder="Enter first name here">
<input type="text" [(ngModel)]="lastName" placeholder="Enter last name here">
<hr>
<h1 [hidden]="!firstName || !lastName">Hello {{lastName + ', ' + firstName}}!</h1>
<!--h1 [hidden]="!firstName || !lastName">Hello {{fullName()}}!</h1!-->
<button ng-click="alertFullName()">show full name</button>

的src / hello_world.ts：

import {Component} from 'angular2/core';

@Component({
  // Declare the tag name in index.html to where the component attaches
  selector: 'hello-world',

  // Location of the template for this component
  templateUrl: 'src/hello_world.html'
})
export class HelloWorld {
  firstName: string = '';
  lastName: string = '';
  function fullName(): string {
    return firstName + ', ' + lastName;
  }
  function alertFullName() {
    alert(firstName + ', ' + lastName);
  }
}

Answer 1

除了@GünterZöchbauer写的内容（即使用(click)，而不是ng-click），此代码

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

应该是

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

Answer 2

此

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

应该是

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

这对我来说很好用

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

（我必须更改"!firstName || !lastName"表达式，因为我使用Dart并且null检查必须是明确的）

Answer 3

如果我们查看Angular 2 templates的文档，我们可以看到{{bindMe}}形式的插值只能绑定到属性：

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

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

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

你可以改为使用getter fullName来产生你想要的值：

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

然后在模板中使用fullName：

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

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

3 个答案: