使搜索栏过滤页面上显示的产品

Question

我希望搜索栏过滤页面上的所有产品，例如，当我填写“ hammer”时，我希望其余显示的卡片消失。产品全部通过卡显示。

我该如何实现？

tool-card.component.html：

http://localhost:3000

包含搜索栏的app.component.html：

<div class="row">


      <div class="col-md-3" style="padding-left:35px; padding-top: 35px;" 
      *ngFor="let product of products">

        <!-- Card Wider -->
<div class="card card-cascade wider shadow" style=" width: 15rem; height: 400px;">

    <!-- Card image -->
    <div class="view view-cascade overlay">
      <div class="inner">
      <img  class="card-img-top" src="{{product.imageUrl}}" alt="Card image cap">
      </div>
      <a href="#!">
        <div class="mask rgba-white-slight"></div>
      </a>
    </div>

    <!-- Card content -->
    <div class="card-body card-body-cascade text-center">

      <!-- Title -->
      <h4 class="card-title"><strong>{{product.name}}</strong></h4>
      <p class="card-text">{{product.description}}  </p>

      <!-- Price and rent button-->
      <div >
          <hr>
          <div>
              <p><b>€{{product.price}}</b> /day</p>
              <button type="button" class="btn btn-success" data-toggle="modal" data-target="#rentScreen" (click)="openModal(product) ">
                Rent
              </button>
            </div>
      </div>
    </div>
  </div>
      </div>
</div>

<!-- MODAL -->

<!-- MODAL -->

<div class="modal fade" id="rentScreen">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content" style="width:400px; height:600px;">
          <div class="pull-right" style="margin-top: 0;">
              <button type="button" class="close" data-dismiss="modal">
                  <span>&times;</span>
                </button>
          </div>
          <img src="{{activeProduct.imageUrl}}" alt="Image rent product" style="height:250px;">
          <h2 class="modal-title text-center"><strong>{{activeProduct.name}}</strong></h2>
        <div class="modal-body" >
          <div class="div">
            <div class="productDescription" >
                {{activeProduct.description | slice:0:20 }}
            </div>

              <hr>  

              <p style="float: left;">Price of product per day:</p>   <p style="float: right;"> <b>€{{activeProduct.price}}</b>,- </p> 
              <br><br>  
              <p style="float: left;">Days you want to rent the product:</p>

                  <input type="number" min="0" [(ngModel)]="inputNum" style="width:40px; float:right;" />
    <br>
    <hr>
    <p style="float: left;">Total price:</p>
    <p style="float: right;"> <b>€{{activeProduct.price * inputNum}}</b>,-</p>

        </div>

          </div>
          <div class="div">

  <button type="button"
   class="btn btn-success"
   [disabled]="btnEnabled"
   data-dismiss="modal" style="width: 100%">Rent</button>
          </div>



      </div>


    </div>
  </div>

tool-card.component.ts：

<nav class="navbar navbar-light bg-light justify-content-between" style="width:100%">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

<!-- container   -->

<div class="container" style=" height: 100%;">

    <form class="form-inline" style="padding-top:10px;">
        <i class="fas fa-search" aria-hidden="true"></i>
        <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search for item..." aria-label="Search">
      </form>
  <app-tool-card></app-tool-card>
</div>