@ViewChild Angular 2无法工作宽度离子Textarea

Question

我想在离子2中的组件中获得离子 - textarea的值，但是我始终有此错误

无法读取未定义的

的属性"值"

代码html：

<ion-textarea   #preferences id="preferences" placeholder="Veuillez mentionner vos préferences"></ion-textarea>

组件.ts：

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

Answer 1

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

如何获取与元素2

中与元素相关的组件的引用

在您的情况下，您将首选项应用于离子文本组件。它是具有value属性

的TextInput组件

https://github.com/ionic-team/ionic/blob/fed4fd95d2545c3245c3245d891b837e2bcc4ded79d/src/components/input/input/input.ts#l144

因此，您应该简单地喜欢这样做：

import { TextInput } from 'ionic-angular';
...
@ViewChild('preferences') m_preferences: TextInput;
addProduct() {
  console.log(this.m_preferences.value);
}

我还准备了 stackblitz示例

您也可以无需ViewChild做到这一点：

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

stackblitz示例

如果您处理角表格，请考虑@greybeardedgeek答案

Answer 2

来自文档：

请注意，必须从值或[（ngmodel）]属性中加载其值。与本地元素不同，不支持从Textarea的内部内容加载其值。

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