Question

依旧建立this question，从我打过电话的推文JSON中提取媒体数据。起初，我认为它就像迭代JSON一样简单，但entities.media.media_url并不总是存在，并且会为不包含它们的推文返回未定义的错误。我尝试创建一个方法来提取数据（如果它存在），但我无法让它进行迭代。

tweets.component.html

    <div class="tweet-container">
    <div *ngFor="let item of tweetsdata" class="tweets-card">
      <div class="tweet-text">
        <p class="tweet-date">{{item.created_at | slice:0:10}}</p>
        <p>{{item.text}}</p>
        <!-- <img src={{getImage()}}> -->
           <!-- <p>hello: {{item.entities?.media[0].media_url}}</p> -->

           <p>{{getImage()}}</p>

        <div class="interact-tweet">
            <a href="https://twitter.com/intent/tweet?in_reply_to={{item.id_str}}" target="_blank"><i class="fa fa-reply" aria-hidden="true"></i></a>
            <a href="https://twitter.com/intent/retweet?tweet_id={{item.id_str}}" target="_blank"><i class="fa fa-retweet" aria-hidden="true"></i></a>
            <a href="https://twitter.com/intent/like?tweet_id={{item.id_str}}" target="_blank"><i class="fa fa-heart" aria-hidden="true"></i></a>
        </div>
      </div>
    </div>
  </div>

tweets.component.ts

...
searchcall() {
    const headers = new Headers();
    // const searchterm = 'query=' + this.searchquery;
    const searchterm = 'query=from%3Adailymuse%20%23' + this.searchquery;


    headers.append('Content-Type', 'application/X-www-form-urlencoded');

    this.http.post('https://localhost:3000/search', searchterm, {headers: headers}).subscribe((res) => {
      this.tweetsdata = [
        res.json().data.statuses[0],
        res.json().data.statuses[1],
        res.json().data.statuses[2],
        res.json().data.statuses[3],
        res.json().data.statuses[4]
      ];

      console.log(this.tweetsdata);
      this.screen_name = this.tweetsdata[0].user.screen_name;
      this.user = this.tweetsdata[0].user.name;
      this.profile_img_url = this.tweetsdata[0].user.profile_image_url_https;
      this.user_id = this.tweetsdata[0].user.id_str;
    });
  }

  getImage() {

    if (this.tweetsdata.entities) // will keep returning undefined because it's not pointing to a specific tweet in the array, tweetsdata
      {
      const imgURL = this.tweetsdata.entities.media[0].media_url;
      console.log(imgURL);
      return  imgURL;
      } else {
        console.log('nope');
      }
    }

我认为* ngIf最有意义使用，但我不确定如何设置语句以检查密钥是否存在，然后呈现链接。这就是我尝试过的：

<p *ngIf="item.entities">{{item.entities.media[0].media_url}}</p>

如果存在附加图像，则技术上有效，但它会破坏以下不包含图像的推文的代码。我是否正确设置了if语句？

Angular4-在JSON中显示并不总是存在的项目

0 个答案: