在 Angular 7 中未从 Firebase 检索数据

Posted 2023-03-05

【中文标题】在 Angular 7 中未从 Firebase 检索数据

【英文标题】：Data not retrieving from Firebase in Angular 7

【发布时间】：2019-08-20 01:31:55

【问题描述】：

我想从 firebase 数据库中检索数据集并填充我的下拉列表。但什么也没有出现。我做了很多研究，但我仍然无法解决这个问题。我正在使用 Angular 7。

ERROR Error: "Cannot find a differ supporting object 'function (events) 
            var snapshotChanges$ = Object(_snapshot_changes__WEBPACK_IMPORTED_MODULE_0__["snapshotChanges"])(query, events);
            return afDatabase.scheduler.keepUnstableUntilFirst(afDatabase.scheduler.runOutsideAngular(snapshotChanges$)).pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_5__["map"])(function (actions)  return actions.map(function (a)  return a.payload.val(); ); ));
        ' of type 'valueChanges'. NgFor only supports binding to Iterables such as Arrays."

category.service.ts

import  Injectable  from '@angular/core';
import  AngularFireDatabase  from 'angularfire2/database';

@Injectable()
export class CategoryService 

  constructor(private db: AngularFireDatabase)  

  getCategories()

    return this.db.list('/categories').valueChanges;//get categories list in database and return it
  

product-form.component.ts

import  Component, OnInit  from '@angular/core';
import  CategoryService  from 'src/app/category.service';
import  ProductService  from 'src/app/product.service';
import  Router  from '@angular/router';

@Component(
  selector: 'app-product-form',
  templateUrl: './product-form.component.html',
  styleUrls: ['./product-form.component.css']
)
export class ProductFormComponent implements OnInit 

  categories$;

  constructor(private router: Router, private categoryService: CategoryService, private productService: ProductService)  
    this.categories$ = categoryService.getCategories();
  

product-from.component.html

中与问题相关的代码段

 <div class="form-group">
      <label for = "category">category</label>

      <select #category="ngModel" ngModel name="category" id ="category"class="form-control" required>
          <option value=""></option>
          <option *ngFor="let cate of categories$" [value]=" cate.$key "> cate.name </option>
       </select>

       <div class="alert alert-danger" *ngIf="category.touched && category.invalid">Category is required.
       </div>
</div>

这就是我的数据库的样子

【参考方案1】：

这就是我的数据库的样子

很可能问题出在您的数据库设计上。尝试将其从基于对象的设计更改为数组设计，如下所示。

从 firebase

导出 JSON 文件并将类别更改 为array。所以它会如下所示。

"Categories": [
     "name":"Bread",
     "name":"Dairy" ,
     "name":"Fruits" ,
    .....
    .....
    .....
  ]

将修改后的 JSON 导入到 firebase。

【参考方案2】：

将 getCatergories() 方法更改为：

getCategories() 
return this.db
  .list('/categories', (ref) => ref.orderByChild('name'))
  .snapshotChanges()
  .pipe(
    map((actions) => 
      return actions.map((action) => (
        key: action.key,
        val: action.payload.val(),
      ));
    )
  );

并像这样在 HTML 中调用填充值：

<option *ngFor="let c of categories$|async" [value]="c.key">
    c.val.name
</option>

来源：Unable to fetch $key from firebase in Angular5 template