Сортировка данных в Firebase (Angular) - PullRequest
Новая
       1

Сортировка данных в Firebase (Angular)

1 голос
/ 05 мая 2020

У меня есть список дел, и я хочу отсортировать его по клику по категориям, например: author / dateOfCreate / deadline .. Я использую метод Firebase orderBy ('property_name') и в первый раз, когда я вызываю его в конструкторе, он работает , но когда я пытаюсь передать другое свойство property_name в функции ниже - этого не происходит. Я новичок в этом, поэтому буду рад любому совету. Вот мой код: 

export interface Todo {
  id?: string,
  author?: string,  
  completed?: boolean,   
  dateOfCreate?: number,  
  deadline?: number,  
  todoDescription?: string  
}

TodoService 

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument
} from '@angular/fire/firestore';
import { Todo } from '../models/todo'
import { Observable } from 'rxjs';
import { map, filter } from 'rxjs/operators';


@Injectable({ providedIn: 'root' })
export class TodosService {
  todoCollection: AngularFirestoreCollection<Todo>
  todos: Observable<Todo[]>
  sort: string= 'deadline'

  constructor(public afs: AngularFirestore) {
    console.log(this.afs.collection('todos'))
    this.todoCollection = this.afs.collection('todos', ref => ref.orderBy(this.sort, 'desc'))
    this.todos = this.todoCollection.snapshotChanges().pipe(
      map(changes => {
        return changes.map(a => {
          const data = a.payload.doc.data() as Todo
          data.id = a.payload.doc.id
          return data
        })
      })
    )
  }

  getTodos() {
    return this.todos
  }

  sortByAuthor(){
    return this.sort = 'author'
  }
}

Todo.component.ts 

constructor(private todoService: TodosService) { }

sortbyAuthor() {
  this.todoService.sortByAuthor()
}

Todo.component. html

<button (click)="sortbyAuthor()">Author</button>

1 Ответ

0 голосов
/ 05 мая 2020

Когда вы вызываете sortByAuthor(), запрос не выполняется, вы просто присваиваете author this.sort. Поэтому изменений нет. Вы можете изменить класс обслуживания на следующий: 

@Injectable({ providedIn: 'root' })
export class TodosService {
  todoCollection: AngularFirestoreCollection<Todo>
  todos: Observable<Todo[]>
  sort: string= 'deadline'

  constructor(public afs: AngularFirestore) {
    console.log(this.afs.collection('todos'));
  }

  getCollection(sort : string){
    this.todoCollection = this.afs.collection('todos', ref => ref.orderBy(this.sort, 'desc'))
    this.todos = this.todoCollection.snapshotChanges().pipe(
      map(changes => {
        return changes.map(a => {
          const data = a.payload.doc.data() as Todo
          data.id = a.payload.doc.id
          return data
        })
      })
    )
  }

  getTodos() {
    return this.todos
  }

  sortByAuthor(){
    this.sort = 'author';
    return this.getCollection(this.sort);
  }
}
...