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

Question

我正在开发Ionic 2中的东西，并且我只是陷入了一件简单的事情。

我有一个文本框，我想在其中键入文本以及文本应该出现在哪里。我使用了this网站上的代码并对其进行了一些修改。

它适用于简单的HTML / JS程序。我认为这与我在Ionic Project中使用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键，也可以按下按钮显示文字。

Answer 2

使用：

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

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

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