Question

我正在使用amgular4实现搜索功能，但我不知道在过滤Angular4中找不到的记录时如何显示消息。这里我有两个文件模板和组件。

搜索结果模板

<ng-template #content>
  <div *ngIf="car">
            <div class="abc">Car Information</div>
        </div>
        <div class="card__body">
                      <p class="u-text-bold">Car number</p>
                    </div>
                  <div class="col">
                      <p class="u-text-bold">Car Color</p>
                    </div>
                      <p class="u-text-normal">{{Car.number}}</p>
                    </div>
                  <div class="col">

                      <p class="u-text-normal">{{Car.Color}}</p>

                  </div>

</ng-template>

Answer 1

您可以在视图中添加条件：

<div *ngIf="records?.length == 0;else data"> 
   ...
</div>
<ng-template #data>
  ...
</ng-template>

编辑：如果您有汽车列表，这应该是您的观点：

<div *ngIf="cars?.length == 0;else data">
 <div *ngFor="let Car of cars;">
  <div class="abc">Car Information</div>
  <div class="card__body">
    <p class="u-text-bold">Car number</p>
  </div>
  <div class="col">
    <p class="u-text-bold">Car Color</p>
  </div>
  <div>
    <p class="u-text-normal">{{Car.number}}</p>
  </div>
  <div class="col">
    <p class="u-text-normal">{{Car.Color}}</p>
  </div>
 </div>
</div>
<ng-template #data>
   <h1>No records found</h1>
</ng-template>

Answer 2

我可能认为您正在搜索car，如果它可用，则显示car details，如果没有则显示该消息。如果是这种情况，那么您可以遵循以下内容：

<div *ngIf="car; else noInfo>
    <div class="abc">Car Information</div>
    <div class="card__body">
      <p class="u-text-bold">Car number</p>
    </div>
    <div class="col">
      <p class="u-text-bold">Car Color</p>
    </div>
    <p class="u-text-normal">{{Car.number}}</p>
    <div class="col">
      <p class="u-text-normal">{{Car.Color}}</p>
    </div>
</div>
<ng-template #noInfo>Your message</ng-template>

有关if-else中Angular 4的更多信息，请访问：https://medium.com/aviabird/ngif-else-lands-in-angular-2-0-a242940e54ff

如何在过滤Angular4中找不到的记录时显示消息

2 个答案: