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）]值？

回答

相關問題