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">

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

Answer 2

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

如果为空，Angular2隐藏输出

2 个答案: