typescript Textarea 的“HTMLElement”类型不存在属性“value” - Angular
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45028233/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Property 'value' does not exist on type 'HTMLElement' for Textarea - Angular
提问by dandev91
Using Angular 4 (typescript), I have the below HTML code:
使用 Angular 4（打字稿），我有以下 HTML 代码：
<div *ngIf="dataService.selected_markers.length == 0" id="tsnPasteContainer">
<form style="width: 100%; height: 100%">
<textarea id="tsn_list" style="width: 100%; height: 100%" type="text" name="tsn_list" placeholder="e.g. 2001311,2425302,2153542,2435974"></textarea>
</form>
</div>
I am trying to get the data that the user is typing into the textarea using:
我正在尝试使用以下方法获取用户在 textarea 中输入的数据：
public parseTSNs(){
let tsnString = document.getElementById("tsn_list").value;
console.log("User inputted string: " + tsnString);
}
This function is called by a button.
该函数由按钮调用。
The code is not compiling due to:
由于以下原因，代码未编译：
Property 'value' does not exist on type 'HTMLElement'
This should be a simple function. What am I doing wrong? W3schools "getting values from textarea" shows '.value' as the required function!
这应该是一个简单的函数。我究竟做错了什么？W3schools “从 textarea 获取值”显示 '.value' 作为必需的函数！
回答by Saravana
You just have to assert that the type of your element is HTMLTextAreaElement. Because document.getElementByIdreturns HTMLElementand not all html elements have the valueproperty:
你只需要断言你的元素的类型是HTMLTextAreaElement. 因为document.getElementById返回HTMLElement而不是所有 html 元素都具有以下value属性：
let tsnString = (document.getElementById("tsn_list") as HTMLTextAreaElement).value;
But seeing as you use Angular, you should probably be using data binding instead of querying the values yourself
但是当您使用 Angular 时，您可能应该使用数据绑定而不是自己查询值
回答by pppai
I had faced a similar issue while setting the value of a cell in the table.
我在设置表格中单元格的值时遇到了类似的问题。
I was adding the data as follows:
我添加的数据如下：
document.getElementById("table_id").rows[0].cells[0].innerHTML = "data_to_be_added";
And I was getting the following error:
我收到以下错误：
error TS2339: Property 'rows' does not exist on type 'HTMLElement'
Property 'cells' does not exist on type 'HTMLElement'
错误 TS2339：类型“HTMLElement”上不存在属性“行”
“HTMLElement”类型上不存在属性“cells”
So I added the following tag and the ERROR got resolved.
所以我添加了以下标签，错误得到解决。
(document.getElementById("table_id") as any).rows[0].cells[0].innerHTML = "data_to_be_added";
Here, you are expicitly changing the type of the variable as any.
在这里，您明确地将变量的类型更改为 any。
回答by kris_IV
回答by kris_IV
Although it's not supposed to work like that, If you want to do it like this, first give your tag a reference with a #:
虽然它不应该那样工作，如果你想这样做，首先给你的标签一个引用#：
<div *ngIf="dataService.selected_markers.length == 0" id="tsnPasteContainer">
<form style="width: 100%; height: 100%">
<textarea #myTA style="width: 100%; height: 100%" type="text" name="tsn_list" placeholder="e.g. 2001311,2425302,2153542,2435974"></textarea>
</form>
</div>
Then, in your component, import this :
然后，在您的组件中，导入：
import {ViewChild, ElementRef } from '@angular/core';
Declare a variable matching your reference :
声明一个与您的引用匹配的变量：
@ViewChild('myTA') myTextArea: ElementRef;
In your method :
在你的方法中：
parseTSNs() {
let el = this.myTextArea.nativeElement as HTMLElement;
console.log(el.value);
}
