為網格添加搜索功能

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() {
  }