如果为空,Angular2隐藏输出

时间:2016-10-14 05:19:13

标签: angular

我有如下所示的代码,它从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>

2 个答案:

答案 0 :(得分:1)

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

searchRes=[];

并在html中使用

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

并且您的代码可以正常运行

答案 1 :(得分:0)

如果您想在文本框中没有值的情况下使用类search-res well隐藏div,则可以使用<div *ngIf="searchStr" class="search-res well">,或者可以在组件searchRes = []中设置searchWord检查searchStr值的方法是否为空。