Question

我想要实现的是在Angular应用程序中显示我的数据库中的一些新闻，我的问题是我无法查询数据库。我更确定这只是一个小错误，但为了它，我无法弄明白。

编辑1 - 在实现@David East提供的代码之后，我只在“.equalTo（category））”行中出现错误，告诉我它正在使用分号或者， }）。在这一点上，我被困住了，任何帮助都会很棒。

Course.component

    export class CoursesListComponent implements OnInit {
  coursesObservable;
  categorySubject = new Subject<any>();

  constructor(private db: AngularFireDatabase, public auth: AuthService) { }
  ngOnInit() {
    this.coursesObservable = this.categorySubject.map(category => {
      return this.db.list<any[]>('courses', ref  => {
        return ref.orderByChild('category')
          .equalTo(category))
          .valueChanges();
    });
}
    pickCategory (category: string) {
      this.categorySubject.next(category);
    }

}

HTML

  <ul>
  <div class="scrollmenu">
    <select [(ngModel)]="category" (change)="pickCategory(category)">
      <option *ngFor="let category of coursesObservable | async" value="{{category.title}}">{{ category.title }}</option>
    </select>
  </div>
  <div *ngFor="let course of coursesObservable | async">

    <a href="{{course.url}}" target="_blank" >
      <h3>{{course.title}}</h3>
      <p>{{course.description}}</p>
       </a>

  </div>
</ul>

firebase的JSON文件

{  "courses":
        {
          "Angular 1" : {
            "description" : "Lorem Ipsum",
            "title" : "Title 1",
            "url" : "https://www.news.ro/"
            "category" : "test"
          },
          "Angular 2" : {
            "description" : "Itent, sometimes on purpose (injected humour and the like).",
            "title" : "Title 2",
            "url" : "https://www.news.ro/"
            "category" : "test"
          }
        }
}

Answer 1

您需要使用异步管道启动可观察的订阅，否则不会发生任何事情。

<select [(ngModel)]="category" (change)="pickCategory(category)">
  <option *ngFor="let category of coursesObservable | async" value="{{category.title}}">{{ category.title }}</option>
</select>

要更新有关更改的类别，您需要更改pickCategory方法以发出新值以更改查询。这是使用RxJS主题最简单的方法。您希望每当用户选择新值时都能够重建查询。主题将创建类别值流。只要有新值，您就可以指示AngularFire根据新值重建查询。

Course.component.constructor(private db: AngularFireDatabase, public auth: AuthService) { }
  categorySubject = new Subject<any>();

  ngOnInit() {
    this.coursesObservable = this.categorySubject.map(category => {
      return this.db.list<any[]>('courses', ref  => {
        return ref.orderByChild('category')
                  .equalTo(category))
                  .valueChanges();
      });
    });
  }

  pickCategory (category: string) {
    this.categorySubject.next(category);
  }

}

这样，只要提交新值，AngularFire就可以重建查询。

AngularFire2查询不起作用

1 个答案: