如果为空，Angular2 隐藏输出

Question

我有如下所示的代码，它从 REST 端点获取一些数据并将其显示在列表中。页面加载正常，当输入输入到文本框中时，一切都按计划进行。问题是如果用户从文本框中删除所有输入，输出仍然存在。反正有没有使用 ngIf 说如果 searchRes 是空的那么不显示任何东西？我尝试使用 *ngIf="searchRes.length > 0 但没有任何变化，旧的输出仍然被显示...

<div class="row">
<div class="col-md-12">
  <form>
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon">&gt;&gt;</span>
      <input type="text"
             class="form-control" [(ngModel)]="searchStr" name="searchStr" (keyup)="searchWord()">
      <span class="input-group-btn"></span>
    </div>
  </div>
</form>
</div>
</div>

<div *ngIf="searchRes" class="search-res well">
<div *ngFor="let res of searchRes">
<div class="row">
  <div class="col-md-12">
    <p>{{res}}</p>
  </div>
</div>
</div>
</div>

Answer 1

当用户从文本框中删除所有输入时，只需在组件中将 searchRes 设为空(如果您有 searchStr 以外的其他文本框)

searchRes=[];

并在 html 中使用

<div *ngIf="searchRes && searchStr" class="search-res well">

你的代码会正常工作