CODEWITHSUNDEEP
angularfirebaseangularfire2angular5ngfor
FrankTheTank
FrankTheTank

Reputation: 785

Nothing visible inside ngFor

I am trying to pull data from Firebase and display it on my page but everything nested inside my ngFor is not showing, any ideas why?

My page currently looks like this but I want the data inside the ul to actually show

enter image description here

shop-items-list.component.html

<div>
  <h1>TEST</h1>
  <ul>
    <li *ngFor="let shopItem of shopItems">
      <div>
        <h2>TESTING 2.0</h2>
        <h1>{{shopItem.name}}</h1>
        <p>{{shopItem.price}}</p>
      </div>
    </li>
  </ul>
</div>

shop-items-list.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { ShopItem } from '../../models/shopItem';

@Component({
  selector: 'app-shop-items-list',
  templateUrl: './shop-items-list.component.html',
  styleUrls: ['./shop-items-list.component.css']
})
export class ShopItemsListComponent implements OnInit {

  @Input()
  shopItems: ShopItem[];

  constructor() { }

  ngOnInit() {
  }

}

app.component.html

<input type="text" placeholder="Search..." (keyup)="search(input.value)" #input>
<app-shop-items-list [shopItems]="filteredShopItems"></app-shop-items-list>

app.component.ts

import { Component, OnInit } from '@angular/core';
import {ShopItem} from './models/shopItem';
import {ShopService} from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  allShopItems: ShopItem[];
  filteredShopItems: ShopItem[];

  constructor(private service: ShopService) {}

  ngOnInit() {
    this.service.findAllShopItems()
      .subscribe(
        shopItems => this.allShopItems = this.filteredShopItems = shopItems
      );
  }

  search(search: string) {
    this.filteredShopItems = this.allShopItems.filter(shopItem =>
      shopItem.name.toLowerCase().includes(search.toLowerCase())
    );
  }


}

app.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { AngularFireDatabase } from 'angularfire2/database';
import { ShopItem } from './models/shopItem';

@Injectable()
export class ShopService {

  constructor(private af: AngularFireDatabase) {}

  findAllShopItems(): Observable<ShopItem[]> {

    return this.af.list('products').valueChanges().map(ShopItem.fromJsonList);

  }

}

shopItem.ts

export class ShopItem {

  constructor (
    public $key: string,
    public filename: string,
    public name: string,
    public price: number
  ) {}

  static fromJsonList(array): ShopItem[] {
    return array.map(ShopItem.fromJson);
  }

  static fromJson({$key, filename, name, price}): ShopItem {
    return new ShopItem(
      $key,
      filename,
      name,
      price
    );
  }

}

Upvotes: 1

Views: 133

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

You are assigning empty array to allShopItems instead change it as,

 ngOnInit() {
    this.service.findAllShopItems()
      .subscribe(
        shopItems => this.allShopItems = shopItems;
      );
  }

  search(search: string) {
    this.filteredShopItems = this.allShopItems.filter(shopItem =>
      shopItem.name.toLowerCase().includes(search.toLowerCase())
    );
  }

also try adding ngIf over filteredShopItems to make sure data exists

<app-shop-items-list *ngIf="filteredShopItems" [shopItems]="filteredShopItems"></app-shop-items-list>

Upvotes: 1

Related Questions