Ionic 2 - 类型错误时不存在属性

Question

我正在 Ionic 2 中开发一些东西，但被困在一个简单的东西上。

我有一个文本框，我想在其中输入文本以及文本应该出现的位置。我使用了this网站上的这段代码并稍作修改。

它在一个简单的 HTML/JS 程序中工作。我认为这与我在 Ionic 项目中也使用 Typescript 的事实有关。

HMTL：

<p>This is a  <b id='TextToChange'>Test</b> </p>
<input type='text' id='userInput' value='Enter Text' />
<input type='button' (click)='changeText()' value='Change Text' />

JS/TS：

changeText() {
var userInput = document.getElementById('userInput').value;
document.getElementById('TextToChange').innerHTML = userInput;
}

然后我在 Visual Studio 中遇到错误（请参见下面的屏幕截图）。然后我将代码更改为：

var userInput = document.getElementById('userInput').nodeValue;

在 VS 中，我不再收到错误，但如果我按下按钮，程序将不会获取值，因此它会让原始值消失并保持空白。 这个没有错误日志。

有人有想法吗？

Answer 1

我想出了一个解决办法。

HTML：

<p id='TextToChange'>{{value}}</p>
<input #box (keyup.enter)="changeText(box.value)">
<input type='button' (click)='changeText(box.value)' value='Change Text' />

注意：在您的导出类下方添加以下内容！ JS/TS：

value = '';
changeText(value: string) { this.value = value; }

您可以按 Enter 或按 Button 以显示文本。

Answer 2

用途：

var userInput = document.getElementById('userInput').innerText;

警告：我强烈建议您阅读有关 Angular 2 Data binding 的文档。

在“绑定语法”部分下，您可以看到如何使用 Angular 2 完成此操作的示例。这也适用于 Ionic 2。您应该按照此处显示的方式进行操作。