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

我知道了

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_list”。另外，在值更改后没有角<5的do（）或角6的pipe（tap（）），就不能立即订阅值。最后但同样重要的是，由于杰里米·W（Jeremy W）和特洛伊·迈尔斯（Troy Myers），我现在抓住了键正确地。它还异步地更新标签，这很棒。谢谢大家。

Answer 2

问题在于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 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);

});

});

您需要将Firebase返回的'tags'对象更改为一个数组，以便能够使用* ngFor，并且可以通过以下方式完成此操作：

Object.keys(tweetElement.tags);

angularfire2-获取标签数组

3 个答案: