NGX-CHIPS не рендерит возвращенный список Firebase - PullRequest
Новая
       26

NGX-CHIPS не рендерит возвращенный список Firebase

0 голосов
/ 21 мая 2019

Я использую NGX-Chips в Angular.Я сохраняю набранные фишки в Firebase и извлекаю их.

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

Перед публикацией этого вопросаЯ попытался прочитать и следить за этой проблемой на GitHub и добавил тег displayBy и identifyBy безрезультатно.

ОШИБКА 

Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

HTML Code 

<tag-input 
     (onAdd)="onCategoryAdded($event, product.external_id)" 
    [displayBy]="'display'"
    [identifyBy]="'$key'" 
    [(ngModel)]="product.categories"
    [ngModelOptions]="{standalone: true}"
    theme="minimal" 
    placeholder="Categories"
>
 <tag-input-dropdown [autocompleteItems]="categories"></tag-input-dropdown></tag-input>
</tag-input>

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

public products: Observable<any[]>;

ngOnInit() {
   this.products = this.afd.list('/products').valueChanges();
}

onCategoryAdded(event, product) {
  this.afd.database.ref('/products').orderByChild('external_id').equalTo(product).once('value', (snapshot) => {
    snapshot.forEach((product) => {
      this.afd.database.ref('/products').child(product.key).child('categories').push({
        'display' : event.display,
        'value' : event.value
      });
    });
  });
}

product.categoriesпечатает, как показано ниже, когда я добавляю {{product.categories | json}} к своему html. 

{ "-LfN8VhSrWBye-8ukSAq": { "display": "Featured", "value": "Featured" } }

Должен ли я изменить способ сохранения категорий в Firebase, чтобы он возвращал другое значение, или я должен каким-то образом преобразовать возвращаемое значение в контроллере

1 Ответ

0 голосов
/ 21 мая 2019

Как описано в сообщении об ошибке, NGX-CHIPS ожидает массив, и вы передаете объект

Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Вы передаете это NGX-CHIPS 


{ "-LfN8VhSrWBye-8ukSAq": { "display": "Featured", "value": "Featured" } }

вам нужно преобразовать этот json / объект в массив, вы можете сделать это, используя оператор карты 

// don't forget to import the operator

import { map } from 'rxjs/operators'


ngOnInit() {
   this.products = this.afd.list('/products').valueChanges().pipe(
map(list => {

      const productsArray = Object.keys(list).map(key => {
         const item = list[id]; // [{display: 'Featured', value: 'Featured'}]
         item.key = key;  // [{key: "-LfN8VhSrWBye-8ukSAq", display: 'Featured', value: 'Featured'}]
         return item;
      });

   }));
}
...