Angular 4 Ngx-datatable Filter非工作对象为null但是被访问(即
发布时间:2020-12-17 17:10:25 所属栏目:安全 来源:网络整理
导读:我正在使用ngx-datatable,我试图为我的代码添加过滤器功能,但它根本不起作用. 这是我的代码: import {Component,OnInit,ViewChild,ViewEncapsulation} from '@angular/core';import {NavbarService} from '../../Services/navbar.service';import {DataServ
我正在使用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: 解决方法
这显然是HTML中的错误,会破坏您的过滤.
将安全导航操作符放入行的每个插值中,如: {{row.AspNetUsers?.Name}} {{row.AspNetUsers?.SpecialCode}} 等等.应该删除错误,这样你就可以更深入地调试. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |