Как я могу написать что-то, если нет данных из магазина?

Question

У меня есть коллекция в пожарном магазине, которая называется спички, внутри нее все спички в некоторых лигах.В моем приложении есть страница сегодняшних совпадений, иногда совпадений нет.Я хочу написать «Сегодня нет совпадений», если оно пустое!Как я могу это сделать?Я использую иконические 3 и угловые 5.

это файл match.html

<ion-grid>
        <ion-row class="grid-css" *ngFor="let match of matchitemsToday | async" (click)="showMatchInfo(match)">
        <ion-col col-1>
            <img width="50px" height="25px" src="assets/img/teamsicon/{{match.away_bdg}}.png">
        </ion-col>
        <ion-col class="grid-text">
            {{match.away}}
        </ion-col>
        <ion-col class="match-time" col-2>
            <div class="match-time-text">{{match.time}}</div>
        </ion-col>
        <ion-col class="grid-text">
            {{match.home}}
        </ion-col>
        <ion-col col-1>
            <img width="50px" height="25px" src="assets/img/teamsicon/{{match.home_bdg}}.png">
        </ion-col>
        {{match.da}}
        </ion-row> 
</ion-grid>

это файл match.ts

ngOnInit() {
    this.matchesColToday = this.afs.collection('matches', ref => {
      return ref.where('day', '==', now)
    });
      this.matchitemsToday = this.matchesColToday.valueChanges();
}

Спасибо:)

Answer 1

Используйте ngIf с условием else / then в matchitemsToday.Что-то вроде:

    <ng-container *ngIf="matchitemsToday; then matches;else nomatch"></ng-container>
//or    <ng-container *ngIf="matchitemsToday.length>0; then matches;else nomatch"></ng-container>

    <ng-template #nomatch>
        <ion-label>No matches Today</ion-label>
    </ng-template>
    <ng-template #matches>
        <ion-grid>
            ....
        </ion-grid>
    </ng-template>