Как правильно фильтровать массив с помощью TypeScript в Angular?

Question

Привет всем, я новичок в Angular, и я хотел бы отфильтровать массив следующим образом:

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>

вывод

Вопрос

Я ищу что-то, чтобы отфильтровать мой объект JSON Array, но я не знаю, почему мой код не работает и показывает пустые строки.Пожалуйста, помогите мне отследить мою ошибку.

Answer 1

Добавить в нижний регистр в d.title

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

Answer 2

Вы также должны применить toLowerCase() к своему фильтру:

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