angularfire2 - получение массива тегов

Question

Я пытаюсь получить массив тегов для правильной печати тегов в моем шаблоне. У меня есть это:

<div *ngFor="let tweet of tweets | async">

    <p>
    {{ tweet.msg}}
    </p>
    <p>
    {{ tweet.username }}
    </p>
    Tags:
    <div *ngFor="let tag of tweet.tags">
        {{ tag }}
    </div>

</div>

Моя база данных firestore выглядит так по причинам индекса:

tweets: { 
  msg: "joe", 
  username: "bill2", 
  tags: {
    construction: true,
    computers: true
  }
}

Все печатается правильно, кроме тегов.

Я думаю, что-то вроде этого, но потом я терплю неудачу.

this.tweetsCollection = this.afs.collection('tweets');
this.tweets = this.tweetsCollection.valueChanges();
this.tweets.subscribe(tags => {
  tags.forEach(tag => {
    Object.keys(tag).map(key => tag[key])
})

Это, очевидно, не работает. Это даже необходимо? Я думаю, что я обдумал это.

Answer 1

Проблема в том, что свойство tags является объектом. *ngFor нужен массив для зацикливания, поэтому вам нужно превратить свойство tags в массив.

this.tweetsCollection = this.afs.collection('tweets');
this.tweets = this.tweetsCollection.valueChanges();
this.tweets.subscribe(arrayOfTweets => {
  arrayOfTweets.forEach(eachTweet => {
    // Ensure we don't get an undefined error if there is no 'tags' property on this tweet
    eachTweet['tags'] = eachTweet['tags'] ? eachTweet['tags'] : {}
    // Prepare HTML-friendly array of tags
    let arrayOfTags = [];
    // Loop over the 'tags' object's properties, we're interested in saving the name of the key of the property
    Object.keys(eachTweet['tags']).forEach(eachTagName => {
      arrayOfTags.push(eachTagName);
    })
    // Finally, overwrite the 'tags' property...
    eachTweet['tags'] = arrayOfTags;
  })
})

Answer 2

Я понял это

this.tweetsCollection = this.afs.collection('tweets');
this.tweets = this.tweetsCollection.valueChanges()
  .pipe(
    tap(tweets => {

      tweets.forEach(tweet => {

        tweet['tags'] = tweet['tags'] ? tweet['tags'] : {}

        let tags = [];

        Object.keys(tweet['tags']).forEach(tag => {
          tags.push(tag);

        })

        tweet['tags_list'] = tags;
      })
    })
  )

Было несколько вещей. Я не могу перезаписать массив "tags", мне пришлось создать новый: "tags_list". Кроме того, вы не можете подписаться сразу после изменения значения без do () в angular <5 или pipe (tap ()) в angular 6. Наконец, что не менее важно, благодаря Джереми W и Troy Myers, я теперь взял ключи правильно. Он также обновляет теги асинхронно, и это здорово. Спасибо, ребята. </p>

Answer 3

Что-то вроде этого должно делать то, что вы ищете:

  tweet_list = [];

  this.tweetsCollection = this.afs.collection('tweets');

  this.tweets = this.tweetsCollection.valueChanges();

  this.tweets.subscribe(tweet_collection => {

  tweet_collection.forEach(tweet => {

  let tweetElement = tweet;

  tweetElement.tags = Object.keys(tweetElement.tags);

  this.tweet_list.push(tweetElement);

});

});

Вам нужно изменить объект 'tags', возвращаемый Firebase, в массив, чтобы иметь возможность использовать * ngFor, и это было сделано с помощью этого бита:

Object.keys(tweetElement.tags);