javascript - 错误 TS2339 : Property 'checked' does not exist on type 'HTMLElement'

Question

我是 angularjs 的新手，我正在使用这个 https://www.gyrocode.com/articles/jquery-datatables-how-to-add-a-checkbox-column/我项目的组件中的示例，但我收到这些错误，如

src/app/users/users-list/users-list.component.ts(42,60) 中的错误:错误 TS2339:属性“checked”在类型“HTMLElement”上不存在。src/app/users/users-list/users-list.component.ts(48,14):错误 TS2339:属性“checked”在类型“HTMLElement”上不存在。src/app/users/users-list/users-list.component.ts(51,20):错误 TS2339:属性“checked”在类型“HTMLElement”上不存在。src/app/users/users-list/users-list.component.ts(54,14):错误 TS2339:属性“不确定”在类型“从不”上不存在。src/app/users/users-list/users-list.component.ts(64,23):错误 TS2345:“文档”类型的参数不可分配给“元素”类型的参数。 “文档”类型中缺少属性“classList”。src/app/users/users-list/users-list.component.ts(66,19):错误 TS2339:属性“checked”在类型“HTMLElement”上不存在。src/app/users/users-list/users-list.component.ts(71,39):错误 TS2339:属性“name”在类型“HTMLElement”上不存在。src/app/users/users-list/users-list.component.ts(72,30):错误 TS2339:属性“value”在类型“HTMLElement”上不存在。

这是我的 component.ts

import { User } from './../../../_models/user';
import { UserService } from './../../_services/user.service';
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { first } from 'rxjs/operators';

@Component({
  templateUrl: './users-list.component.html',
})
export class UsersListComponent implements OnInit {
    dtOptions: DataTables.Settings = {};
    users: User[] = [];
    checked: any;

  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers'
  };
  this.loadAllUsers();

  ///////////////////////// temp code///////////////////////////////////
  var table = $('#example').DataTable({
    'ajax': 'https://api.myjson.com/bins/1us28',
    'columnDefs': [{
       'targets': 0,
       'searchable': false,
       'orderable': false,
       'className': 'dt-body-center',
       'render': function (data, type, full, meta){
           return '<input type="checkbox" name="id[]" value="' 
              + $('<div/>').text(data).html() + '">';
       }
    }],
    'order': [1, 'asc']
 });

 // Handle click on "Select all" control
 $('#example-select-all').on('click', function(){
    // Check/uncheck all checkboxes in the table
    var rows = table.rows({ 'search': 'applied' }).nodes();
    $('input[type="checkbox"]', rows).prop('checked', this.checked);
 });

 // Handle click on checkbox to set state of "Select all" control
 $('#example tbody').on('change', 'input[type="checkbox"]', function(){
    // If checkbox is not checked
    if(!this.checked){
       var el = $('#example-select-all').get(0);
       // If "Select all" control is checked and has 'indeterminate' property
       if(el && el.checked && ('indeterminate' in el)){
          // Set visual state of "Select all" control 
          // as 'indeterminate'
          el.indeterminate = true;
       }
    }
 });
 $('#frm-example').on('submit', function(e){
    var form = this;

    // Iterate over all checkboxes in the table
    table.$('input[type="checkbox"]').each(function(){
       // If checkbox doesn't exist in DOM
       if(!$.contains(document, this)){
          // If checkbox is checked
          if(this.checked){
             // Create a hidden element 
             $(form).append(
                $('<input>')
                   .attr('type', 'hidden')
                   .attr('name', this.name)
                   .val(this.value)
             );
          }
       } 
    });

    // FOR TESTING ONLY

    // Output form data to a console
    $('#example-console').text($(form).serialize()); 
    console.log("Form submission", $(form).serialize()); 

    // Prevent actual form submission
    e.preventDefault();
 });

  //////////////////////////end here/////////////////////////////////////


  }

  deleteUser(id: number) {
    this.userService.delete(id).pipe(first()).subscribe(() => { 
        this.loadAllUsers(); 
    });
}
  private loadAllUsers() {
    this.userService.getAll().pipe(first()).subscribe(users => {
        this.users = users;
        console.log(JSON.stringify({users}));
    });
}
}

和html

<div class="container-fluid">
    <div class="page-title">        

    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-block"> 
                    <div class="row">                        
                    <div class="col-md-8">
                    <a href="" class="btn btn-primary" [routerLink]="['/users/add-user']" >
                            <i class="ti-plus pdd-right-5"></i>
                            <span>Add User</span>
                        </a>
                    </div>
                    <div class="col-md-2">
                            <a href="" class="btn btn-danger">
                                    <i class="ti-trash pdd-right-5"></i>
                                    <span>Delete User</span>
                                </a>
                    </div>
                    <div class="col-md-2">
                            <a href="" class="btn btn-default">
                                    <i class="ti-reload pdd-right-5"></i>
                                    <span>Block User</span>
                                </a>
                    </div>                        
                    </div>
                    <form id="frm-example" action="/path/to/your/script.php" method="POST">

                        <table id="example" class="display" cellspacing="0" width="100%">
                           <thead>
                              <tr>
                                 <th></th>
                                 <th>Name</th>
                                 <th>Position</th>
                                 <th>Office</th>
                                 <th>Extn</th>
                                 <th>Start date</th>
                                 <th>Salary</th>
                              </tr>
                           </thead>
                           <tfoot>
                              <tr>
                                 <th></th>
                                 <th>Name</th>
                                 <th>Position</th>
                                 <th>Office</th>
                                 <th>Age</th>
                                 <th>Start date</th>
                                 <th>Salary</th>
                              </tr>
                           </tfoot>
                        </table>

                        <hr>

                        <p>Press <b>Submit</b> and check console for URL-encoded form data that would be submitted.</p>

                        <p><button>Submit</button></p>

                        <p><b>Selected rows data:</b></p>
                        <pre id="example-console-rows"></pre>

                        <p><b>Form data as submitted to the server:</b></p>
                        <pre id="example-console-form"></pre>

                        </form>

                </div>
            </div>
        </div>
    </div>
</div>    

谁能告诉我什么可以替换 this.checked 来修复我的组件中的错误，或者知道如何修复这些错误

还有一件事，全选在 angulerjs 项目中不起作用

在此先感谢您的建议和回答....

Answer 1

当 JQuery 处理一个事件时，它会将“this”关键字指向当前的 HTML 元素。来自JQuery docs :

When jQuery calls a handler, the this keyword is a reference to the element where the event is being delivered; for directly bound events this is the element where the event was attached and for delegated events this is an element matching selector

因此“this”当前将指向 HTML 复选框而不是您的组件。为了将“this”绑定(bind)到您的组件，您可以使用 fat arrow syntax :

$('#example tbody').on('change', 'input[type="checkbox"]', () => {
  if (this.checked) // Now works
}

但是，我建议您开始学习开始探索 Angulars event binding和 rendering .否则你可能会得到两个库，它们都在争夺 dom 并遇到一些奇怪的行为。