如何绑定 Angular 2 表达式和 TypeScript 方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34444190/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to bind an Angular 2 expression and TypeScript method?
提问by Peter Pei Guo
What I am trying to do is to show the full name, when first name and last name are entered.
我想要做的是在输入名字和姓氏时显示全名。
This works:
这有效：
<h1 [hidden]="!firstName || !lastName">Hello {{lastName + ', ' + firstName}}!</h1>
This does not work (what is the correct way of invoking a method defined in the class?):
这不起作用（调用类中定义的方法的正确方法是什么？）：
<!--h1 [hidden]="!firstName || !lastName">Hello {{fullName()}}!</h1!-->
This does not work either:
这也不起作用：
<button ng-click="alertFullName()">show full name</button>
Here are the files: index.html:
以下是文件：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:
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:
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);
}
}
采纳答案by Mark Rajcok
In addition to what @Günter Z?chbauer wrote (i.e., use (click), not ng-click), this code
除了@Günter Z?chbauer 所写的内容（即使用(click)，不ng-click）之外，这段代码
function fullName(): string {
return firstName + ', ' + lastName;
}
function alertFullName() {
alert(firstName + ', ' + lastName);
}
should be
应该
fullName():string {
return this.firstName + ', ' + this.lastName;
}
alertFullName() {
alert(this.firstName + ', ' + this.lastName);
}
回答by sdgluck
If we take a look at the documentation for Angular 2 templateswe can see that interpolation in the form of {{bindMe}}can bind only to properties:
如果我们查看Angular 2 模板的文档，我们可以看到形式为{{bindMe}}can 的插值只能绑定到属性：
Expressions can be used to bind to properties only. Expressions represent how data should be projected to the View. Expressions should not have any side effect and should be idempotent.
表达式只能用于绑定到属性。表达式表示数据应如何投影到视图。表达式不应该有任何副作用并且应该是幂等的。
This means the following example is 'illegal' as it represents a function invocation:
这意味着以下示例是“非法的”，因为它表示函数调用：
<h1 [hidden]="!firstName || !lastName">Hello {{fullName()}}!</h1>
You could instead have a getter fullNamewhich produces the value you want:
你可以用一个 getterfullName来产生你想要的值：
export class HelloWorld {
firstName: string = '';
lastName: string = '';
get fullName () {
return firstName + ' ' + lastName;
}
}
And then consume fullNamein your template:
然后fullName在您的模板中使用：
<h1 [hidden]="!fullName.length">Hello {{fullName}}!</h1>
回答by Günter Z?chbauer
This
这
<button ng-click="alertFullName()">show full name</button>
should be
应该
<button (click)="alertFullName()">show full name</button>
This works fine for me
这对我来说很好用
<h1 [hidden]="!firstName || !lastName">Hello {{fullName()}}!</h1>
(I had to change the "!firstName || !lastName"expression because I use Dart and there the nullcheck has to be explicit)
（我不得不更改"!firstName || !lastName"表达式，因为我使用 Dart 并且null检查必须是明确的）
