@ViewChild angular 2 not working width ion-textarea

Question

我想在Ionic 2的组件内获取ion-textarea的值，但我总是有这个错误

  

无法阅读财产＆＃39;价值＆＃39;未定义的

代码HTML：

@ViewChild('preferences') m_preferences;
let preferences : this.m_preferences.nativeElement.value;

组件.ts：

netincome

Answer 1

当您在组件元素上应用模板引用变量时，默认情况下您将获得一个组件实例。

How to get reference of the component associated with ElementRef in Angular 2

在您的情况下，您将首选项应用于ion-textarea组件。它是TextInput组件，具有value属性

https://github.com/ionic-team/ionic/blob/fed4fd95d2545c324c45d891b837e2bcc4ded79d/src/components/input/input.ts#L144

所以你应该这么简单：

import { TextInput } from 'ionic-angular';
...
@ViewChild('preferences') m_preferences: TextInput;

addProduct() {
  console.log(this.m_preferences.value);
}

我还准备了 Stackblitz Example

您也可以在没有ViewChild的情况下执行此操作：

<ion-textarea #preferences ...></ion-textarea>
<button (click)="addProduct(preferences.value)">Add product</button>

addProduct(value) {
  alert(value) 
}

<强> Stackblitz Example

如果您处理角形，请考虑@GreyBeardedGeek回答

Answer 2

来自文档：

请注意，必须从值或[（ngModel）]属性加载其值。与native元素不同，不支持从textarea的内部内容加载其值。

所以，你要做的不是支持。 您应该将属性绑定到控件。