錯誤TS2339：類型“ HTMLElement”上不存在屬性“名稱”

Question

profile.component.ts：

var $inputs = $('#changePasswordForm :input');
    var values = {
      oldpassword: String,
      newpassword: String
    };
    $inputs.each(function() {
      console.log(this);
      values[this.name] = $(this).val();
    });
    console.log(values.oldpassword, this.currentUser.username);

profile.component.html：

<form id='changePasswordForm'>
            <div class='form-group input-field'>
              <label for=''>Old Password*</label>
              <input type='password' [(ngModel)]='oldpassword' name='oldpassword' class='form-control'>
            </div>
            <div class='form-group input-field'>
              <label for=''>New Password*</label>
              <input type='password' [(ngModel)]='newpassword' name='newpassword' class='form-control'>
            </div>
          </form>

錯誤：

src / app / components / profile / profile.component.ts（82,19）中的錯誤：錯誤TS2339：類型“ HTMLElement”上不存在屬性“名稱”。

我怎么了？

Answer 1

盡量不要在Angular中使用JQuery

您可以在Angular（ngx）中執行這樣的代碼。 您正在使用ngModel因此它是兩種方式的綁定，您可以在組件文件中訪問此值。

HTML

<form id='changePasswordForm' (ngSubmit)="changePass()">
            <div class='form-group input-field'>
              <label for=''>Old Password*</label>
              <input type='password' [(ngModel)]='oldpassword' name='oldpassword' class='form-control'>
            </div>
            <div class='form-group input-field'>
              <label for=''>New Password*</label>
              <input type='password' [(ngModel)]='newpassword' name='newpassword' class='form-control'>
            </div>

            <button type="submit">Change Password</button>
</form>

TS（組件）

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  oldpassword: string;
  newpassword: string;

  changePass() {

// Here we are getting and setting values
    const values = {
        oldpassword: this.oldpassword,
        newpassword: this.newpassword
    };

    console.log(values);
  }
}

https://stackblitz.com/edit/ngx-change-password-demo