为网格添加搜索功能

Question

我有一个包含 6 个项目的网格，上面有一个“搜索”输入栏。 每个项目都有一个标题和描述。 我希望能够使用搜索输入通过搜索标题或描述来查找/过滤网格中的项目

组件.html

<div class="header">
    <span style="float:right; margin-right: 25px">
      <input 
      type="text" 
      placeholder="Search">
    </span>
    <h1 style="margin-top: 25px; margin-left: 25px; font-family: 'Acme', sans-serif;">Hello World</h1>
</div>
<div class="wrapper">
  <div class="item2">
    <img class="center" src="https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/tnc_48980557.jpg?crop=961,0,1928,2571&wid=600&hei=800&scl=3.21375">
    <h6 *ngFor="let projectTitle of projectInfo.title">{{projectTitle}}</h6>
    <p>{{ projectInfo.description }}</p>
  </div>

组件.ts

  projectInfo: any;

  constructor() {
    this.projectInfo = {
      title: ['Image Title'],
      description: `Image description will be here and likely have a character limit associated with it, as to not take up too much space on the screen.`,
    };
  }

  ngOnInit() {
  }