こんにちは、条件付き表示/角度
のアイコンを非表示に以下のコードは、ブートストラップベル通知アイコンとテンプレートの赤い円を示しています。
<a href dropdownToggle (click)="false">
<i class="glyphicon glyphicon-bell notification-icon">
{{cookieData.search_unread_count}}
</i>
</a>
このコード{{cookieData.search_unread_count}}コンポーネントからのカウントを取得し、赤い円形のアイコン上記ベルアイコンのにカウントを追加します。ここでの課題は、カウントが0の場合にアイコンを非表示にして、鐘の上に赤い円を隠したい場合です。カウントが0より大きい場合は、ベルアイコンの上に赤い円を表示する必要があります。
条件付きでこれを追加するにはどうすればよいですか？あなたが*ngIfを探している
はこのようにしてみてください：
<i class="glyphicon glyphicon-bell" [ngClass]="cookieData.search_unread_count != 0 ? 'notification-icon': ' '"></i>
更新回答：
<i class="glyphicon glyphicon-bell" [ngClass]="cookieData.search_unread_count != 0 ? 'notification-icon': ' '">
<span *ngIf="cookieData.search_unread_count != 0">
{{cookieData.search_unread_count}}
</span>
</i>
Chandruで、このコードをありがとうございました。しかし、そこには小さな問題があります。それは赤い円を隠しますが、カウントが0で0が表示されている場合と同様にカウントが引き続き発生します。私もその数を隠したい。 * ngIfを適用すると、全体が隠れてしまいます。あなたの最後からの入力。 – youi
@youi私は更新された答えは、これが動作するようにしようとすることができます – Chandru
Chandru、私はこれを試してみましたが、この数は数も一緒に鐘全体を隠しています。カウントが0の場合は正常に動作しますが、カウントが0になるとベルが非表示になります。 – youi
、カウントは*ngIfとして[hidden]に並置*ngIfを使用することをお勧めします0
よりも大きい場合
<a href dropdownToggle (click)="false" *ngIf="cookieData.search_unread_count > 0">
<i class="glyphicon glyphicon-bell notification-icon">
{{cookieData.search_unread_count}}
</i>
</a>
の下にのみアイコンが表示されます参照してください。実際にはhtmlを削除し、要素にdisplay: none;を追加するだけではありません。
をシンプル '* ngIf'が十分 – Aravind