Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular 4 Ngx-datatable Filter非工作对象为null但是被访问(即使是if条件)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用Ngx-datatable,我试图为我的代码添加过滤器功能,但它根本不起作用.

这是我的代码

import {Component,OnInit,ViewChild,ViewEncapsulation} from '@angular/core';
import {NavbarservicE} from '../../services/navbar.service';
import {DataservicE} from '../../services/data.service';
import {DatatableComponent} from '@swimlane/ngx-datatable';
import {forEach} from '@angular/router/src/utils/collection';

@Component({
  SELEctor: 'app-student',templateUrl: './student.component.html',styleUrls: ['./student.component.css'],encapsulation: ViewEncapsulation.None
})
export class studentComponent implements OnInit {
  rows: student[];
  @ViewChild('myTable') table: any;

  students: student[];
  temp = [];

  constructor(private nav: Navbarservice,public dataservice: DataservicE) {
    this.dataservice.getstudents().subscribe(students => {
      this.students = [...students];
      this.rows = students;
    });
  }

  ngOnInit() {
    this.nav.show();
  }

  onPage(event: Event) {
    clearTimeout(this.timeout);
    this.timeout = setTimeout(() => {
      console.log('paged!',event);
    },100);
  }

  toggleExpandRow(row) {
    console.log('Toggled Expand Row!',row);
    this.table.rowDetail.toggleExpandRow(row);
  }

  onDetailToggle(event) {
    console.log('Detail Toggled',event);
  }

  updateFilter(event) {
    const val = event.target.value.toLowerCase();
    this.rows = this.students.filter(row =>
      row.AspNetUsers.Nom.toLowerCase().indexOf(val) !== -1 || !val
    );
    this.table.offset = 0;
  }
}

就像在文档代码中一样,我必须在我的输入updateFilter中添加一个函数,它接受输入的值,然后有一个函数根据插入的值过滤临时数组但是这个函数根本不起作用我得不到属性名称’未定义我使用控制台检查了它们的数组的值并调试它似乎数组是正确的并且有值但我不知道为什么过滤器函数什么都不返回.我尝试添加尝试 – 捕获问题消失但过滤器功能过滤器没有.

编辑:student.component.HTML代码

<div class="container">
  <div class="row">
    <div class="col">
      <form>
        <div class="input-group">
          <input class="form-control" id="search"  name="search" (keyup)='updateFilter($event)' placeholder="Rechercher">
          <div class="input-group-addon"><i class="material-icons">search</i></div>
        </div>
      </form>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col">
      <ngx-datatable
        #myTable
        class='material expandable'
        [columnMode]="'force'"
        [headerHeight]="50"
        [footerHeight]="50"
        [rowHeight]="50"
        [rows]='rows'
        [limit]="20"
        (pagE)="onPage($event)">

        <ngx-datatable-row-detail [rowHeight]="120" #myDetailRow (togglE)="onDetailToggle($event)">
          <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
            <div class="container">
              <table class="table">
                <tr>
                  <th>Email</th>
                  <td>{{row.AspNetUsers.Email}}</td>
                </tr>
                <tr>
                  <th>adresse</th>
                  <td>{{row.adressE}}</td>
                </tr>
              </table>
            </div>
          </ng-template>
        </ngx-datatable-row-detail>

        <ngx-datatable-column
          [width]="50"
          [resizeable]="false"
          [sortable]="false"
          [draggable]="false"
          [canAutoResize]="false">
          <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
            <a
              href="javascript:"
              [class.datatable-icon-right]="!expanded"
              [class.datatable-icon-down]="expanded"
              title="Expand/Collapse Row"
              (click)="toggleExpandRow(row)">
            </a>
          </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column name="ID" [width]="100">
          <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.studentID}}
          </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column name="First Name" [width]="100">
          <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.AspNetUsers.NamE}}
          </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column name="last name" [width]="100">
          <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.AspNetUsers.LastNamE}}
          </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column name="Special Code" [width]="100">
          <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.AspNetUsers.SpecialCodE}}
          </ng-template>
        </ngx-datatable-column>


        <ngx-datatable-column name="Phonenumber" [width]="100">
          <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.AspNetUsers.Phonenumber}}
          </ng-template>
        </ngx-datatable-column>

      </ngx-datatable>
    </div>
  </div>
</div>

编辑2:
发现了为什么我得到错误,有一些缺少的名称(它们是null)和内部过滤器,如果它是null,则会发生问题.
添加了学生!== null但问题仍然存在.

解决方法

这显然是HTML中的错误,会破坏您的过滤.
将安全导航操作符放入行的每个插值中,如:

{{row.AspNetUsers?.NamE}}
{{row.AspNetUsers?.SpecialCodE}}

等等.应该删除错误,这样你就可以更深入地调试.

大佬总结

以上是大佬教程为你收集整理的Angular 4 Ngx-datatable Filter非工作对象为null但是被访问(即使是if条件)全部内容,希望文章能够帮你解决Angular 4 Ngx-datatable Filter非工作对象为null但是被访问(即使是if条件)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。