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

Question

I am developing something in Ionic 2 and am stuck at a simple thing.

I have a Textbox where I want to type a text in and where the text should appear. I used this code from this website and modified it a bit.

It works in a simple HTML/JS program. I think it has something to do with the fact that I use also Typescript in my Ionic Project.

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;
}

Then I get an error in Visual Studio (see screenshot below). I then changed the code to this:

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

In VS I don't get an error anymore but if I press the button the program won't grab the value so it lets the original value vanish and stays blank. No error log for this one.

Does anyone have an idea?

Answer 1

I came to a solution.

HTML:

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

NOTE: Add the following below your export class! JS/TS:

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

You can either press Enter or you can press on the Button to display the text.

Answer 2

Use:

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

Warning: I would strongly recommend you to read the documentation about Angular 2 Data binding .

Under the section "Binding syntax" you can see examples of how this is done using Angular 2. This also applies for Ionic 2. You should really do it the way it is shown there.