입력시 필터링이 작동하지 않습니다. (키 업)

Question

ngx-datatable을 앱에 구현하려고하는데 지금까지 내가 가지고있는 것은 행이 많은 테이블이며 첫 번째 열은 자세한 내용을 볼 수있는 토글입니다 행에 대해. 검색 필터를 구현하려고하는데 ngx-datatable 필터링에 대한 데모 설명서를 따르려고 노력 중이며 어떤 이유로 든 내 필터가 작동하지 않고 왜 더 이상 확실하지 않습니다.

<input type="text" style='padding:8px;margin:15px auto;width:30%' placeholder="Search terms..." (keyup)='updateFilter($event)'> 

<ngx-datatable #myTable class="material expandable" 
    [rows]="terms" 
    [columnMode]="'force'" 
    [headerHeight]="50" 
    [footerHeight]="50" 
    [rowHeight]="'auto'" 
    (page)="onPage($event)" 
> 

<ngx-datatable-row-detail [rowHeight]="100" (toggle)="onDetailToggle($event)"> 
    <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template> 
    <div style="padding-left:35px;"> 
     <div><strong>Age:</strong></div> 
     <div>{{row.Age}}</div> 
     <div><strong>Location:</strong></div> 
     <div>{{row.Location}}</div> 
    </div> 
    </ng-template> 
</ngx-datatable-row-detail> 

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


<ngx-datatable-column name="Name"> 
</ngx-datatable-column> 
<ngx-datatable-column name="Gender"> 
</ngx-datatable-column> 

</ngx-datatable> 

export class PeopleTableComponent implements OnInit { 
    @ViewChild('myTable') table: DatatableComponent; 
    peopleArray: PeopleDetail[] = []; 
    temp: PeopleDetail[] = []; 
    expanded: any = {}; 
    timeout: any; 

    constructor(private peopleService: PeopleService) {} 

    ngOnInit() { 
    this.peopleArray = this.peopleService.getPeople(); 
    this.temp = [...this.peopleArray]; //cache list? 
    } 

    getBusinessTerms(): PeopleDetail[] { 
    return this.peopleArray = this.peopleService.getPeople(); 
    } 

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

    toggleExpandRow(row) { 
    this.table.rowDetail.toggleExpandRow(row); 
    } 

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

    updateFilter(event) { 
    const val = event.target.value.toLowerCase(); 
    const temp = this.temp.filter((d) => { 
     return d.name.toLowerCase().indexOf(val) !== -1 || !val; 
    }); 
    this.peopleArray = temp; 
    this.table.offset = 0; 
    } 
} 

나는 즉시 No data to display로 변경 입력에 뭔가를 입력 할 때. 나는 그 주위를 검색 한 후에 정말로 혼란 스럽다. 나의 updateFilter(event)은 다른 사람들이하고있는 것과 똑같은 일을하고 있지만 그것들을 위해 일하는 것 같다.

Answer 1

내 문제가 해결 된 것 같습니다. this.temp = [... this.peopleArray]; 내가해야 할 일은 this.temp = this.peopleArray입니다. 처음에는 빈 목록 (this.temp)을 검색했기 때문에 필터가 작동하지 않는 이유가 여기에 있습니다.

솔루션은 ngOnInit() 메소드에만 있습니다.

ngOnInit() { 
    this.terms = this.odmService.getBusinessGlossary(); 
    this.temp = this.terms; 
    }