كيف اسوي "لاتوجد مباريات اليوم" عند الاستعلام من firebase؟

السلام عليكم ورحمة الله وبركاته

عندي ملف مقسمه إلى مباريات اليوم ، الامس ، غدا ، الكل !!

وجلبت البيانات لكل قسم لحاله

لكن لنفترض لاتوجد مباريات اليوم! كيف اكتب "لا توجد مباريات اليوم" وتختفي إذا فيه مباريات؟

حاولت عن طريق ngIf  لكن ما زبطت معاي؟؟

هذا ملف Html:

<ion-header>
    <ion-toolbar color="dark">
        <ion-segment [(ngModel)]="matchOf">
        <ion-segment-button value="today" (click)="showToday = !showToday">
            <ion-icon name="flame"></ion-icon>
        </ion-segment-button>
        <ion-segment-button value="yesterday">
            <ion-icon name="arrow-back"></ion-icon>
        </ion-segment-button>
        <ion-segment-button value="tommorow">
            <ion-icon name="arrow-forward"></ion-icon>
        </ion-segment-button>
        <ion-segment-button value="calendar">
            <ion-icon name="calendar"></ion-icon>
        </ion-segment-button>
        </ion-segment>
    </ion-toolbar>
</ion-header>
<ion-content id="page6" class="ion-content">

<div *ngFor="let item of getItems(matchOf)">
<div [hidden]=item.hide>
        
    <div *ngIf="item.col == 'matchToday'">
        <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>

    </div>


    <ion-grid *ngIf="item.col == 'matchitemsYesterday'">
        <ion-row class="grid-css" *ngFor="let match of matchitemsYesterday | 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>

    <ion-grid *ngIf="item.col == 'matchitemsTomorrow'">
        <ion-row class="grid-css" *ngFor="let match of matchitemsTomorrow | 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>

    <ion-grid *ngIf="item.col == 'matchitemsAll'">
        <ion-row class="grid-css" *ngFor="let match of matchitemsAll | 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>

</div>
</div>
</ion-content>

هذا ملف ts:

import { Component } from '@angular/core';
import { NavController, NavParams, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';

// Connect Page with Firebase
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import * as moment from 'moment';

import { ViewmatchPage } from '../viewmatch/viewmatch';

// Matches interface
interface Matinf {
  league: string;
  home: string;
  home_bdg: string;
  away: string;
  away_bdg: string;
  day: string;
  time: string;
  field: string;
  ref: string;
  tv: string;
  comm: string;
  tag: string;
}

let now = moment().format('YYYY-MM-DD');
let tomorrow = moment().add(1, 'day').format('YYYY-MM-DD').toString();
let yesterday = moment().subtract(1, 'day').format('YYYY-MM-DD').toString();
@Component({
  selector: 'page-match',
  templateUrl: 'match.html'
})
export class MatchPage {
  matchOf = 'today';
  nomatch = true;

  match: any = {
    'today': [
      {
        hide: false,
        col: 'matchToday'
      }
    ],
    'yesterday': [
      {
        hide: false,
        col: 'matchitemsYesterday'
      }
    ],
    'tommorow': [
      {
        hide: false,
        col: 'matchitemsTomorrow'
      }
    ],
    'calendar': [
      {
        hide: false,
        col: 'matchitemsAll'
      }
    ]
  };


  matchesColToday: AngularFirestoreCollection<Matinf>;
  matchesColYesterday: AngularFirestoreCollection<Matinf>;
  matchesColTomorrow: AngularFirestoreCollection<Matinf>;
  matchesColAll: AngularFirestoreCollection<Matinf>;

  matchitemsToday: Observable<Matinf[]>;
  matchitemsYesterday: Observable<Matinf[]>;
  matchitemsTomorrow: Observable<Matinf[]>;
  matchitemsAll: Observable<Matinf[]>;


  league: string;
  home: string;
  home_bdg: string;
  away: string;
  away_bdg: string;
  day: string;
  time: string;
  field: string;
  ref: string;
  tv: string;
  comm: string;
  tag: string;


  constructor(public navCtrl: NavController,
    public navParams: NavParams, public afs: AngularFirestore, 
    public statBar: StatusBar, public platform: Platform) { 
      this.platform= platform;
      this.platform.ready().then( () => {
        this.statBar.overlaysWebView(true);
        this.statBar.backgroundColorByHexString('#d1d1d1');
      });
    }
  
    showMatchInfo(matchitem) {
      this.navCtrl.push(ViewmatchPage, matchitem);
  }

  getItems(type: any) {
    return this.match[type];
  }

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

    this.matchesColYesterday = this.afs.collection('matches', ref => {
      return ref.where('day', '==', yesterday)
    });
      this.matchitemsYesterday = this.matchesColYesterday.valueChanges();
      
    this.matchesColTomorrow = this.afs.collection('matches', ref => {
      return ref.where('day', '==', tomorrow)
    });
      this.matchitemsTomorrow = this.matchesColTomorrow.valueChanges();
    
    this.matchesColAll = this.afs.collection('matches', ref => {
      return ref.orderBy('day').orderBy('time');
    });
      this.matchitemsAll = this.matchesColAll.valueChanges();
  }
}

انقذوني :)

وشكرا جزيلا :)