Запрос AngularFire2 не работает

Чего я пытаюсь добиться, так это показать некоторые новости из моей базы данных в приложении Angular, и моя проблема в том, что я не могу запросить базу данных. Я более чем уверен, что это просто небольшая ошибка, но ради этого я не могу понять это.

Редактировать 1. После реализации кода, предоставленного @David East, я получаю сообщение об ошибке только в строке «.equalTo(category))», говорящее о том, что ожидается точка с запятой или ,}). На данный момент я застрял, и любая помощь будет здорово.

Курс.компонент

    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>

И файл JSON для firebase

{  "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"
          }
        }
}

firebase angular angularfire
person Bogdanel 123    schedule 03.11.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно использовать асинхронный канал, чтобы начать наблюдаемую подписку, иначе ничего не произойдет.

<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 может перестраивать запрос всякий раз, когда отправляется новое значение.

person David East    schedule 03.11.2017
comment
Большое спасибо за ответ. Моя единственная проблема сейчас заключается в том, что я получаю «Аргумент типа» {}» не может быть назначен параметру типа «строка | номер | логическое значение. Тип '{}' нельзя назначить для типа 'false'' в строке .'equalTo(category))'. Что я должен делать ? - person Bogdanel 123; 03.11.2017
comment
Пока вы не знаете, какой тип вам нужен, вы можете использовать this.db.list‹any[]›. Я обновил ответ. - person David East; 03.11.2017
comment
это вообще ничего не меняет. Что именно я делаю неправильно? Если у вас есть время и терпение, это репозиторий. Большое тебе спасибо - person Bogdanel 123; 03.11.2017
comment
Ага, понятно. Вам нужно ввести новую Тему‹любая›(); Я обновил ответ. - person David East; 03.11.2017
comment
Я все еще получаю сообщение об ошибке, говорящее мне, что мне не хватает чего-то рядом с .equalTo(category)), что именно он там ожидает? - person Bogdanel 123; 03.11.2017
comment
Я не уверен, что вы имеете в виду. Можете ли вы обновить вопрос с более подробной информацией? - person David East; 03.11.2017