添加网格的搜索功能

时间:2019-09-18 21:55:02

标签: angular

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

component.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>

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

0 个答案:

没有答案