如何在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中找不到過濾記錄時顯示消息

回答

相關問題