Javascript angularfire2-获取标记数组

我正在尝试获取一组标签，以便在模板中正确打印标签。我有这个：

<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>

除标签外，所有内容都打印正确

我是这样想的，但后来我失败了

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])
})

---

这显然是行不通的。这有必要吗？我觉得我想得太多了。

像这样的东西应该能满足你的需求：

  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);

});

});

您需要将Firebase返回的“tags”对象更改为一个数组，以便能够使用*ngFor，这是通过以下位完成的：

---

Object.key（tweetElement.tags）

问题在于

标记

属性是一个对象

*ngFor

需要一个数组来循环，因此需要将

标记

属性转换为数组

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;
  })
})

我想出来了

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\u list”。此外，如果angular<5中没有do（），或者angular 6中没有管道（tap（）），则无法在值更改后立即订阅。最后但并非最不重要的一点是，多亏了杰里米·W和特洛伊·迈尔斯，我现在正确地抓住了钥匙。它还异步更新标记，这很好。谢谢各位。

我正在尝试调试它，但标记不会更改。我相信valueChanges（）-使用async的意义在于防止它更新。。。如果我能找到答案，我会给你回复。这不起作用，我在将subscribe置于valuechanges（）之后时遇到问题

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;
      })
    })
  )