Textarea的“HTMLElement”类型上不存在属性“值” - Angular答案

【问题标题】：Property 'value' does not exist on type 'HTMLElement' for Textarea - AngularTextarea的“HTMLElement”类型上不存在属性“值” - Angular
【发布时间】：2017-12-15 03:26:36
【问题描述】：

使用 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>

我正在尝试获取用户在 textarea 中输入的数据：

public parseTSNs(){
    let tsnString = document.getElementById("tsn_list").value;
    console.log("User inputted string: " + tsnString);
}

此函数由按钮调用。

代码未编译，原因是：

Property 'value' does not exist on type 'HTMLElement'

这应该是一个简单的函数。我究竟做错了什么？ W3schools "getting values from textarea" 将 '.value' 显示为所需函数！

【问题讨论】：

请提供您的全部相关代码。根据您的问题，我成功制作了一个有效的 sn-p jsfiddle.net/m1feyL6o
尝试使用ngModel或#templateVariable
呃？与其使用 vanilla JS 和 getElementById，不如使用 Angular？...比如，绑定一个模型：<textarea [(ngModel)]='textareaValue'></textarea>

标签： javascript html angular typescript

【解决方案1】：

我在设置表格中单元格的值时遇到了类似的问题。

我添加的数据如下：

document.getElementById("table_id").rows[0].cells[0].innerHTML = "data_to_be_added";

我收到以下错误：

错误 TS2339：“HTMLElement”类型上不存在属性“行”

“HTMLElement”类型上不存在属性“单元格”

所以我添加了以下标签并且错误得到了解决。

(document.getElementById("table_id") as any).rows[0].cells[0].innerHTML = "data_to_be_added";

在这里，您将变量的类型显式更改为 any。

【讨论】：

【解决方案2】：

你只需要断言你的元素类型是HTMLTextAreaElement。因为document.getElementById 返回HTMLElement 并不是所有的html 元素都有value 属性：

let tsnString = (document.getElementById("tsn_list") as HTMLTextAreaElement).value;

但是当您使用 Angular 时，您可能应该使用数据绑定而不是自己查询值

【讨论】：

这是我一直在寻找的答案。尽管我可以（并且将）只使用数据绑定，但我无法弄清楚为什么当我过去没有任何问题地这样做时，vanilla JS 代码不起作用。我以前从未使用过“as”来断言某事——我也不认为这是必要的。所以出于好奇，当@Ionut 的 sn-p 完美地工作而无需断言任何东西时，为什么我必须做“断言”才能在这种情况下工作。
我刚刚通过谷歌搜索打字稿编译和 HTMLElements 在某处找到了这个摘录：“问题”是打字稿是类型安全的。所以 document.getElementById() 返回不包含 value 属性的 HTMLElement 类型。然而，子类型 HTMLInputElement 确实包含 value 属性。
@fila 你是对的。 lonut 的代码是纯 JS。 TypeScript 提供额外的类型检查。

【解决方案3】：

虽然它不应该那样工作，但如果你想这样做，首先用#给你的标签一个引用：

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

然后，在你的组件中，导入这个：

import {ViewChild, ElementRef } from '@angular/core';

声明一个与您的参考匹配的变量：

@ViewChild('myTA') myTextArea: ElementRef;

在你的方法中：

parseTSNs() {
    let el = this.myTextArea.nativeElement as HTMLElement;
    console.log(el.value);
}

【讨论】：

我应该在问题中指定我专门寻找香草 JavaScript 代码在 Angular 中不起作用的原因。虽然我完全同意这是更好的方法。
嗯，不，最好的方法是使用ngModel，你想要的解决方案只是很讨厌。使用原生 JS 就不需要 Angular！

【解决方案4】：

您应该使用：[(ngModel)]='yourValue' 将数据绑定到您的控制器。 Textarea 不使用value 参数。

请阅读有关 HTML 标记及其属性 hire 的更多信息。

【讨论】：

哦，是的，它确实使用了价值。只是和其他输入有点不同，因为它在<textarea></textarea>之间。
哦，是的。是多行文本输入。但我得到了[(ngModel)]='yourValue'。你是对的。
按照定义——真。但通常它与支持属性中的输入完全不同。
就HTML 属性而言，是的。但这并不意味着您不能使用$('textarea').val() 或document.getElementById('some_textarea_id').value 来获取它的值。
这就是我的困惑所在。 “.val()”和“.value()”根本没有编译，你上面的 sn-p 提取（过去对我有用）工作正常。但是@Saravana 的代码使断言为 HTMLTextAreaElement 工作得很好......我从没想过这是必要的。