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：类型“ 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 /用户/用户列表/用户列表.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：类型“ HTMLElement”上不存在属性“值”。

这是我的组件。

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>

任何人都可以告诉我什么可以替代此方法。检查是否可以修复组件中的错误，或者知道如何解决这些错误

另一件事，“全选”在angulerjs项目中不起作用

提前感谢您的建议和答案。...

Answer 1

当JQuery处理事件时，它将'this'关键字指向当前的HTML元素。来自JQuery docs：

当jQuery调用处理程序时，this关键字是对传递事件的元素；对于直接绑定的事件这是事件附加并委托的元素事件，这是一个元素匹配选择器

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

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

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

错误TS2339：类型“ HTMLElement”上不存在属性“已检查”

1 个答案: