كيف اسوي "لاتوجد مباريات اليوم" عند الاستعلام من 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();
  }
}

 

انقذوني :)

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

كلمات دليلية: angular firebase

الإجابة الصحيحة

Alhoqbani • منذ سنة

هذا الكود جربته وشغال:

      <div *ngIf="item.col == 'matchToday'">
        <ion-grid *ngIf="(matchitemsToday | async) as matches; else loading">
          <ion-item *ngIf="matches.length > 0; else no_matches">
            <ion-row class="grid-css" *ngFor="let match of matches" (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-item>
          <ng-template #no_matches>
            <h1>No Matches Today</h1>
          </ng-template>
        </ion-grid>
        <ng-template #loading>
          Loading...
        </ng-template>
      </div>

 

الإجابات (5)

Ali Majrashi • منذ سنة

وعليكم السلام والرحمة هل جربت ngIf مع .length للبيانات ؟

هنا بيتحقق من البيانات موجودة او لا قبل تنفيذ الامر تقدر تستفيد منه لعرض رسالة زي ماتحب

مثال مبسط 

*ngif="matchitemsToday?.length"

وطريقة ثانية 

*ngif="matchitemsToday != 0"

هذا للتحقق من وجود البيانات ولكن تقدر تعكس عملها انك تخليها تتحقق من عدم وجود البيانات وتطبع رسالة  

عبدالله زاهر: جربت كل الطرق ما سألت إلا لما قفلت معاي

عبدالله زاهر • منذ سنة

هذا الكود اللي جربت عليه وبكل الطرق :( 

<ng-container *ngIf="matchitemsToday != 0; then matches else nomatchestoday"></ng-container>
        <ng-template #nomatchestoday>
            <ion-label>No matches Today</ion-label>
        </ng-template>
        
        <ng-template #matches>
        <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>
        </ng-template>

 

Ali Majrashi: عبدالله احتاج منك تعمل console.log لـ matchitemsToday وعطنا ناتج log

Ali Majrashi • منذ سنة

جرب هالكود بدل كود عرض المباريات لليوم 

<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-row class="grid-css" *ngif="!matchitemsToday[0]?.length">
    <ion-col class="grid-text">
        <ion-label>No matches Today</ion-label>
    </ion-col>
</ion-row>

عدلت الكود بدل 

!matchitemsToday?.length

استبدلتها لك بـ

!matchitemsToday[0]?.length

 لان اتوقع ان البيانات الي المخزنة في matchitemsToday اذا كانت فارغة بتكون عبارة عن مصفوفة داخلها object بدون قيم فهذا حل انك تتحقق من اول قيمة في المصفوفة اذا بها قيم او لا يعرض الرسالة

 

Alhoqbani • منذ سنة
الإجابة الصحيحة
مميز

هذا الكود جربته وشغال:

      <div *ngIf="item.col == 'matchToday'">
        <ion-grid *ngIf="(matchitemsToday | async) as matches; else loading">
          <ion-item *ngIf="matches.length > 0; else no_matches">
            <ion-row class="grid-css" *ngFor="let match of matches" (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-item>
          <ng-template #no_matches>
            <h1>No Matches Today</h1>
          </ng-template>
        </ion-grid>
        <ng-template #loading>
          Loading...
        </ng-template>
      </div>

 

عبدالله زاهر: مجنون ياشيخ على هالحل ٣&gt; ما شاء الله تبارك الله ، تسلم ربي يسعدك ويوفقك في هالشهر الكريم 3&gt;

عبدالله زاهر • منذ سنة

سويت تعديلات بسيطة على الكود عشان اللي يبغى يستفيد

<div *ngIf="item.col == 'matchToday'">
  <ion-grid *ngIf="(matchitemsToday | async) as matches; else loading">
     <div *ngIf="matches.length > 0; else no_matches">
            <ion-row class="grid-css" *ngFor="let match of matches" (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>
      </div>
          <ng-template #no_matches>
            <h1>No Matches Today</h1>
          </ng-template>
        </ion-grid>
        <ng-template #loading>
          Loading...
        </ng-template>
</div>

شكرا من القلب ❤️

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !