用Angular中的TypeScript筛选数组的正确方法是什么？

Question

Hello to every one I am new to Angular and I would like to filter an array like this

app.component.ts

export class AppComponent implements OnInit {
    columns:string[];
    posts: Posts[];
    getFilteredData: Posts[];
    rows: number;

ngOnInit() {
    this.columns = ['userId','id','title','body'];
    this.posts = [{userId:1,id:1, title:'Ahmer',body: 'xyz'},{userId:1,id:1, title:'Azeem',body: 'xyz'}]
    this.getFilteredData = this.posts;
    this.rows = this.getFilteredData.length;
}

  onSearching(searchValue: string) {
    this.getFilteredData = this.posts.filter((d:Posts ) => {
        return d.title.includes(searchValue.toLowerCase())
        });
        this.rows = this.getFilteredData.length;
  }
}

class Posts {
  userId: number;
  id: number;
  title: string;
  body: string;
}

app.component.html

<input #searchbox placeholder="Search Something" (input)="onSearching($event.target.value)">
<h1>Results</h1>
<br>
<table width="100%" border="1">
    <tr>
        <th *ngFor="let col of columns">
        {{col}}
        </th>
    </tr>
    <tr *ngFor="let data of getFilteredData">
        <td *ngFor="let col of columns">
        {{data[col]}}
        </td>
    </tr>
    <tr>
       <td>
        Total Rows:
       </td>    
       <td>
       {{rows}}
       </td>
    </tr>
</table>

output

Question

I'm looking for something to filter my JSON Array Object but I don't know why my code doesn't work and show me empty rows. Please help me to track my mistake.

Answer 1

您还必须将toLowerCase()应用于过滤器：

return d.title.toLowerCase().includes(searchValue.toLowerCase())

Answer 2

添加到下例到d.title

return d.title.toLowerCase().includes(searchValue.toLowerCase())