Вложенные угловые2 ngFor директивы для списков Firebase

Я хочу связать результаты запроса Firebase с моим шаблоном, используя ngFor в Angular 2. Это легко сделать ниже.Вложенные угловые2 ngFor директивы для списков Firebase

компонент:

export class FeaturedThreadsComponent { 
    threads: FirebaseListObservable<any[]>; 
    qualitySubject: Subject<any>; 

    constructor(af: AngularFire) { 
     this.qualitySubject = new Subject(); 
     this.threads = af.database.list('/threads', { 
      query: { 
       orderByChild: 'quality', 
       endAt: 5 
      } 
     }); 
    } 
}

шаблона:

<div *ngFor="let thread of threads | async"> 
    {{thread.title}} 
</div>

Но если я хочу использовать другой ngFor директиву вложен в шаблоне списка ключам дочернего объекта ...

<div *ngFor="let thread of threads | async"> 
    {{thread.title}} 
    <div *ngFor="let participant of thread.participants"> 
     {{participant.$key}}} 
    </div> 
</div>

Я получаю консольную ошибку, Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

В моей структуре базы данных, participants является ребенок thread, который является дочерним по отношению к threads где thread является динамическим. Поэтому я не могу использовать прямой путь до participants.

Этот шаблон вложения ngFor директивы отлично работали в службе, которая просто повторялась поверх локального файла. Почему он не работает здесь, кажется мне немного нечетким.

источник

2017-01-18 J. Adam Connor

Я так не считаю. Если я использую фактический ключ '{{member.adam}}, я получаю ту же консольную ошибку. Я подозреваю, что это связано с попыткой перебора объектов «участников», которые Angular 2 не распознает как массив. –

'thread.participants' будет объектом и будет неистребимым с' ngFor'. Это основная проблема, и принятый ответ на упомянутый вопрос должен помочь вам в этом. – cartant

Является ли это 'threads: FirebaseListObservable ;' хранит 'threads' как массив, который является iterable? Казалось бы, это имеет смысл. Это будет означать, что этот вопрос является скорее вопросом использования, характерным для Firebase/Angularfire2. Потому что мне нужен способ, чтобы «участники» попадали в массив наблюдаемых, когда он является дочерним элементом динамического ключа, который не может быть открыт по прямому пути. –

Для тех из вас, кто следует за этой веткой, тот, который помечен как дубликат, сопротивляется созданию трубы, как предлагает принятый ответ. The best answer избегает performance issues принятого ответа и намного проще.

источник

2017-01-18 03:47:05

Вложенные угловые2 ngFor директивы для списков Firebase

ответ

Смежные вопросы