代码之家 › 专栏 › 技术社区 › FrankTheTank

ngFor内部无可见内容

ngfor angular5 angularfire2 firebase angular

FrankTheTank · 技术社区 · 6 年前

我正试图从Firebase中提取数据并将其显示在我的页面上,但我的ngFor中嵌套的所有内容都没有显示,你知道为什么吗?

我的页面当前看起来像这样,但我希望ul中的数据实际显示

选购物品清单。组成部分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>

选购物品清单。组成部分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() {
  }

}

应用程序。组成部分html

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

应用程序。组成部分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())
    );
  }


}

应用程序。服务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
    );
  }

}

1 回复 | 直到 6 年前

Sajeetharan 6 年前

您正在将空数组分配给 allShopItems 改为,

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

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

同时尝试添加 ngIf 结束 filteredShopItems 确保数据存在

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