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

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

来源

2017-09-04 Pooja Gupta

请分享你的服务和结果成分 –

@ArunRedhu我已经贴我的服务代码在评论中。你需要更多的投入吗？ –

您可以使用'* ngIf'应用条件，并且可以在数据不存在时使用'else'块，或者也可以在路由器更改之前使用searchdata获取，如果数据不存在则返回搜索组件 –

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

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

来源

2017-09-04 12:19:53 SergioEscudero

这段代码不适合我。 –

为什么？你的数据和你的观点在哪里？ – SergioEscudero

我已经更新了我的搜索结果模板。我对这里显示的信息感到困惑。如果可能的话，你可以用你的答案更新我的代码。基本上当搜索返回空结果时应显示一条消息 –

我可能以为你正在寻找car，如果它是可用的en显示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

来源

2017-09-05 13:16:08

它不工作。 –

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

回答

相关问题