Angular 2：如何在Component中使用input [（ngModel）]值？

对不起，如果这是一个基本的问题，但我似乎无法弄清楚。Angular 2：如何在Component中使用input [（ngModel）]值？

基本上，我想从模板中获取一个[(ngModel)]输入值，然后将它传递给我的组件。我觉得这是非常基本的Angular 2的东西，但我似乎无法得到它。

我的代码：

input.html：

<app-root>Loading...</app-root>

app/app.component.html

<input type="number" [(ngModel)]="value1"> 
<input type="number" [(ngModel)]="value2"> 
<!--I want my function value to update every time [(ngModel)] is updated 
{{someFunction}}

app/app.component.ts：

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    someFunction(): number { 
    // I want to pass value1 and value 2 here from my ngModel in my template 
    return value1 * value2 
    } 
}

来源

2017-03-16 user3183717

您必须在组件中声明这些变量。

export class AppComponent { 
    value1: number; 
    value2: number; 
    someFunction() { 
    return this.value1 * this.value2; 
} 
}

Working plunker

来源

2017-03-16 15:47:38

完美！在时间限制结束后，我会接受这个答案。我还有一个问题：我可以设置这个函数的返回值作为一个变量，然后我可以用作我的模板？例如，设置'someFunction（）= value3'的值，然后在我的模板中使用'{{value3}}'？ – user3183717

@ user3183717当然。检查更新的plunker。 –

Angular为您提供双向绑定。您可以直接在模板上使用该函数，例如{{someFunction（）}}，可以声明另一个变量，如结果并将其值输入到模板中。然后通过使someFunction（）void并替换返回this.value1 * this.value2;与this.result = this.value1 * this.value2你将有一个在你的模板结果的更新值。 – dkiriakakis

Angular 2：如何在Component中使用input [（ngModel）]值？

回答

相关问题