Ionic,Firebase-如何在ngFor中执行ngFor

时间:2018-10-26 12:17:43

标签: javascript angular ionic-framework

背景

我正在做一个离子项目。我正在创建一个餐厅菜单应用程序,其中在数组内部有一个数组。结构是这样的:

菜单
--category []
---- menuContent []

像这样的

firebase树:

{
  "menu" : {
    "fhsSuizYVhYfwk3jE6Hs1jJ9mul2" : {
      "-LPgLdhiRWtzGZcT68kB" : {
        "category" : "Chicken",
        "menuContent" : {
          "-LPjfZG88i8oir4qZeUr" : {
            "description" : "Tasty & Spicy",
            "menuName" : "Chicken Spicy",
            "menuPrice" : "15000"
          },
          "-LPjmsYuscg0ceMTMriM" : {
            "description" : "Delicious",
            "menuName" : "Sweet Chicken",
            "menuPrice" : "17000"
          }
        }
      },
      "-LPjoKAm8mQsNK1MAPsu" : {
        "category" : "Beef",
        "menuContent" : {
          "-LPk-5YZQtreZQw1vGyL" : {
            "description" : "Dark, sweet, spicy. Yumm!",
            "menuName" : "Beef Blackpepper",
            "menuPrice" : "20000"
          }
        }
      }
    }
  }
}

这是我的应用程序的视图:

enter image description here

现在,我想在类别:鸡肉下,在"menuContent"下找到"category" : "Chicken"下的数组列表

我该怎么做?

我的代码

这是我的 menu.html

<button ion-button (click)="addCategory()">Add Category</button>

  <ion-list>

    <ion-list-header *ngFor="let dataCat of menuCatData | async">
      <h2>Category: {{dataCat.payload.val().category}}</h2>
      <button ion-button (click)="addMenu(dataCat)">Add Menu</button>
    </ion-list-header>
  </ion-list>

这是我的菜单

export class MenuPage {

      menuCatRef: AngularFireList<MenuCategory>;
      menuCatData: Observable<AngularFireAction<DatabaseSnapshot<MenuCategory>>[]>;

      constructor(private afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase,
        private actionSheetCtrl: ActionSheetController,
        public navCtrl: NavController, public navParams: NavParams) {
      }

      ionViewDidLoad() {
        this.afAuth.authState.subscribe(data => {
          if(data && data.email && data.uid){

            this.menuCatRef = this.afDatabase.list<MenuCategory>(`menu/${data.uid}`);
            this.menuCatData = this.menuCatRef.snapshotChanges();

        }});
      }
}

任何帮助将不胜感激。

0 个答案:

没有答案