希望我的搜索仅在单击按钮 angular 后显示

如何解决希望我的搜索仅在单击按钮 angular 后显示

我使用 angular 和 spring boot 来搜索 coli 使用 numeroColi 但我只希望我的结果在点击按钮后显示而不是在写作时显示，我也是希望我的结果在单击之前显示为空： 这是我的 app.component 函数：

public searchColis(key: string): void{
    console.log(key);
    const results: Coli[] = [];
    for (const coli of this.colis){
      if (coli.numeroColi.toLowerCase().indexOf(key.toLowerCase()) !== -1) {
        results.push(coli);
      }
    }
    this.colis = results;
    if (results.length===0 || !key ){
      this.getColis();
    }
  }

这是我的 html 文件：

 <div class="form-horizontal">
                <div class="form-group">
                    <label for="inputOrderTrackingID" class="col-sm-2 control-label">Order id</label>
                        <div class="col-sm-10">
                        <input type="text"  (ngModelChange)="searchColis(key.value)" ngModel #key="ngModel" name="key" class="form-control" id="inputOrderTrackingID" value="" placeholder="# put your order id here">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" id="shopGetorderStatusID" class="btn btn-success">Get status</button>
                    </div>
                </div>
            </div>
    
            <h4>Your order status:</h4>

            <ul  *ngFor="let coli of colis" class="list-group">
                <li class="list-group-item">
                    <span class="prefix">Description:</span>
                    <span class="label label-success">{{coli?.description}}</span>
                </li>
            </ul>