有條件地鏈接到來自twitter的圖片angular4

現在我試圖抓住推文的圖像的URL，但只有當鳴叫包含圖像。我成功地能夠拉推文並拉一些圖像，但如果推文沒有圖片，它打破並停止顯示推文。有條件地鏈接到來自twitter的圖片angular4

tweets.component.html

<div *ngFor="let item of tweetsdata"> 
    <div class="profile-pic><img src={{item.user.profile_image_url}}> 
    </div> 

    <div class="screenname">{{item.user.name}}</div> 

    <div class="tweet-content">{{item.text}}</div> <!-- correctly pulls in all tweets --> 

<div class="tweet-img"> 
    <img src="{{item.entities.media[0].media_url}}" /> <!-- breaks when post doesn't have a photo, no more tweets load after it --> 
</div> 

</div>

我嘗試設置源作爲的.ts文件中的字符串，並有條件地改變字符串的值，如果它返回null這樣的：

<p>{{item.entities.media[0].media_url != null ? item.entities.media[0].media_url : 'hello'}}</p>

但我不認爲它會起作用，因爲我從JSON拉出來，不想重新分配任何東西。我該如何解決？

來源

2017-08-27 bluebrooklynbrim

您可以添加一個檢查

<div *ngFor="let item of tweetsdata"> 
    <div class="profile-pic><img src={{item.user.profile_image_url}}> 
    </div> 

    <div class="screenname">{{item.user.name}}</div> 

    <div class="tweet-content">{{item.text}}</div> 
<div class="tweet-img" *ngIf="item.entities.media[0].media_url"> 
    <img src="{{item.entities.media[0].media_url}}" /> 
</div>

來源

2017-08-27 13:02:36

實際上分配圖像src屬性之前插入div來DOM與* ngIf，而邏輯是有道理的，這種解決方案並沒有爲我工作。我仍然不斷收到錯誤信息：'每當推文沒有圖像時，都無法讀取'undefined'的屬性'0'，但現在，圖像推文也不會打印出來。有沒有ngIf語句相當於說它是空的，甚至不創建圖像標籤？ – bluebrooklynbrim

你能爲你的問題創建一個解決方案嗎？將幫助你解決它。您可以暫時存儲數據，但嘗試在plunker中重現確切的問題。 –

有條件地鏈接到來自twitter的圖片angular4

回答

相關問題