更新

Question

我有一个代码：

document.getElementById('loginInput').value = '123';

但在编译代码时我收到以下错误：

HTMLElement类型中不存在属性值。

我已声明var：value: string;。

如何避免此错误？

谢谢。

Answer 1

如果你想设置值，你可以在点击或某些事件触发的某些功能中执行相同的操作。

你也可以使用像{/ p>这样的局部变量使用ViewChild获得价值

<input type='text' id='loginInput' #abc/>

并获得这样的价值

this.abc.nativeElement.value

here is working example

更新

好的，你必须使用angualr2的ngAfterViewInit方法，就像这样

ngAfterViewInit(){
    document.getElementById('loginInput').value = '123344565';
  }

ngAfterViewInit不会抛出任何错误，因为它会在模板加载后呈现

Answer 2

(<HTMLInputElement>document.getElementById('loginInput')).value = '123';

Angular不能直接获取html元素，你需要通过将上面的泛型绑定到它来指定元素类型。

Answer 3

一种不同的方法，即：您可以“以Angular方式”执行此操作并使用ngModel并完全跳过document.getElementById('loginInput').value = '123';。相反：

<input type="text" [(ngModel)]="username"/>
<input type="text" [(ngModel)]="password"/>

并在您的组件中提供以下值：

username: 'whatever'
password: 'whatever'

这将在导航到页面时预设用户名和密码。

Answer 4

比较角度方式（通过ID设置/获取值）：

//在HTML标签中

 <button (click) ="setValue()">Set Value</button>
 <input type="text"  #userNameId />

//在组件.ts文件中

    export class testUserClass {
       @ViewChild('userNameId') userNameId: ElementRef;

      ngAfterViewInit(){
         console.log(this.userNameId.nativeElement.value );
       }

      setValue(){
        this.userNameId.nativeElement.value = "Sample user Name";
      }



   }

按ID获取元素 - Angular2

4 个答案:

更新