AngularFirestore-顯示子檔案陣列的內容

這個問題有一個很長的設定。最后，我要求提供語法指導，如果您滾動到設定的結尾，您會看到這個問題。

我有一個 Firestore 資料庫，它有一個包含陣列的欄位。下面是一個例子：

檔案本身具有除成分元素之外的其他欄位。這是您在此處看到的剛果拆分配方的 JSON 表示：

"congosplit": {
  "ingredients": {
    "a": {
      "ingredientAmounts": "2 Pump, 3 Pumps, 4 Pumps",
      "ingredientName": "Banana Syrup",
      "ingredientSizes": "Small, Medium, Large"
    },
    "b": {
      "ingredientAmounts": "2 Pump, 3 Pumps, 4 Pumps",
      "ingredientName": "White Chocolate",
      "ingredientSizes": "Small, Medium, Large"
    },
    "d": {
      "ingredientAmounts": "10 oz, 12 oz, 16 oz",
      "ingredientName": "Steamed Milk and Foam",
      "ingredientSizes": "Small, Medium, Large"
    }
  },
  "instructions": {
    "a": {
      "text": "Free pour milk into cup.  Top with 1/4 inch foam.  Make a circle with chocolate drizzle and use a thermometer to spread the chocolate into a flower pattern.",
      "type": "text"
    }
  },
  "name": "Congo Split",
  "temperature": "hot"
},

從上面的結構可以推斷出，成分和說明欄位都可能包含多個元素……在下面的示例中使用a、b和c設計。

我遵循了使用 Angular Firestore 的示例代碼片段：

in my recipes.service.ts file, I have the following method that provides a real-time-updating copy of the data in Firestore:

  getRecipesFirestore() {
    this.recipesCollection = this.afs.collection('mission-cafe');
    this.recipesData = this.recipesCollection.valueChanges();
    return this.recipesData;
  }

in the home.ts file I call that method, returning the recipesData:

  ngOnInit() {

   [...]

    this.recipesData = this.recipesService.getRecipesFirestore();
  }

And the good news is I can easily show the content of most of this data set using an *ngFor in the template file:

  <ion-card *ngFor="let item of recipesData | async">
     <ion-title>{{item.name}}</ion-title>
  </ion-card>

This works for all of the keys at the top level of the document field. But when I try to display the sub-elements of ingredients or instructions I get a [object] instead of the content. It is not totally surprising. Here's an example of what doesn't work.

  <ion-card *ngFor="let item of recipesData | async">
     <ion-title>{{item.name}}</ion-title>

     <div *ngFor="let ingred of item>                     < I was hoping to be able
         <ion-text>{{ingred.ingredientName}}</ion-text    < to iterate through elements
     </div>                                               <  of the ingredient array

  </ion-card>

所以問題是：
我無法弄清楚獲取配方欄位內地圖內容的語法。

我可以想象決議 JSON（我在使用實時資料庫時這樣做），但我希望利用上面模板檔案所暗示的使用 Firestore 簡化的簡單語法。

有語法教練嗎？

uj5u.com熱心網友回復：

在撰寫本文時，唯一允許列出檔案子集合的庫/SDK 是在“可信服務器環境”中使用的庫/SDK，例如 Node.js、Java、PHP 等。請參閱

所以剩下的問題是如何讓所有這些資料顯示在應用程式中。 從概念上講，這是您希望發生的事情。

This was the approach:

In ngOnInit we get the collection, and subscribe to the recipesInfo

ngOnInit() {

this.recipesCollection = this.afs.collection('mission-cafe');
this.recipesInfo = this.recipesCollection.snapshotChanges();

this.recipesInfo.subscribe((actionArray) => {
  this.recipesElements = actionArray.map((item) => ({
    id: item.payload.doc.id,
    ...item.payload.doc.data(),
    expanded: false
  }));
});

}

To explain this for newbies... recipesElements is the array over which the template file (the HTML file) will iterate. So we load that up with the IDs of the recipe documents and all of the rest of the recipe documents. That's what the spread operator ... does. It stands in for all of the rest of that data. Then I add one more element expanded that I use later to decide whether the recipe should be expanded (open) or collapsed in an accordion display of ion-cards.

Then in the template file, I have this:

<ion-card
  (click)="expandItem($event, false, item)"  <--- use this to toggle open/closed on accordion display
  *ngFor="let item of recipesElements">
  <ion-card-header>
      <ion-card-title>{{item.name}}
  </ion-card-header>
  <ion-card-content>
    <app-expandable expandHeight="6500px" [expanded]="item.expanded">

         [[[[insert formatting here for the display]]]]
         [[[[my formatting includes the individual fields]]]]

              item.notes
              item.image
              item.status
              and so on.

         [[[[ for instructions, I had an secondary *ngFor like this ]]]]

              <ion-item *ngFor="let ingred of item.ingredients">
         
         [[[[ and then refer to the individual ingredients as ]]]]

              <ion-grid>
                   <ion-row>
                        <ion-col> {{ingred.ingredientName}} </ion-col>
                        <ion-col> {{ingred.ingredientSizes}} </ion-col>
                        <ion-col> {{ingred.ingredientAmounts}} </ion-col>
                   </ion-row>
              <ion-grid>
          </ion-item>
     <ion-card>

So it is fairly straight-forward. I just needed to understand the structure of a Firestore collection and then create an array from it over which to iterate.

標籤：javascript 有角的 离子框架 谷歌云firestore 角火2

上一篇：面試官：能用JS寫一個發布訂閱模式嗎？

下一篇：帶有IONIC/Angular的.NET6中的CORS問題