如何將條件項目右側或項目左側添加到離子頭像？

我有問題獲得條件屬性item-left和item-right來處理ion-item中的元素。看來，如果我使用項目左側和項目右側，整個html輸出實際上會發生變化。如何將條件項目右側或項目左側添加到離子頭像？

我想要實現的是一個簡單的聊天應用程序，它顯示離子列表中左側或右側的離子化身。下面是我想要實現的一個例子。方法isMe（）返回true或false，取決於顯示的當前消息是否來自我。

<ion-list no-lines> 
    <ion-item *ngFor="let msg of messages" text-wrap> 
     <ion-avatar [attr.item-left]="isMe(msg.userid) ? '' : null" [attr.item-right]="isMe(msg.userid) ? null : ''"> 
     <img [src]="getAvatar(msg.avatar)"> 
     </ion-avatar> 
     <div class="chatbubble {{isMe(msg.userid) ? '' : 'other'}}" item-content> 
      {{msg.message}} 
     </div> 
    </ion-item> 
    </ion-list>

如果我硬編碼兩個每個項目左和項目權在各自離子化身它不正確地顯示出來，但由於某些原因包裝這在ngFor一直沒有離子項目的列表運作良好。正如我所提到的，研究html輸出項目右鍵實際上似乎是對html輸出進行排序以實現項目左側或右側之間的差異，因此看起來這些屬性是編譯時效果？

更新！我確實找到了一種使用* ngIf解決這個問題的方法，雖然相當醜陋，因爲我不能在離子項上使用* ngIf，因爲* ngFor已經是重複元素了。所以我沒有在每個標籤下使用* ngIf。下面是可以工作的代碼，儘管希望有更好的做法。將標籤封裝在兩個div中不起作用，因爲item-left和item-right需要位於ion-avatar上，以便ionic2爲這兩種情況創建正確的html輸出。無論如何，如果有人需要它，下面的代碼在這種情況下工作正常（雖然很醜）。

<ion-list no-lines> 
    <ion-item *ngFor="let msg of messages" text-wrap> 
     <ion-avatar item-left *ngIf="isMe(msg.userid)"> 
     <img [src]="getAvatar(msg.avatar)"> 
     </ion-avatar>   
     <div class="chatbubble" item-content *ngIf="isMe(msg.userid)"> 
      {{msg.message}} 
     </div> 
     <ion-avatar item-right *ngIf="!isMe(msg.userid)"> 
     <img [src]="getAvatar(msg.avatar)"> 
     </ion-avatar>   
     <div class="chatbubble other" item-content *ngIf="!isMe(msg.userid)"> 
      {{msg.message}} 
     </div> 
    </ion-item> 
    </ion-list>

來源

2016-11-24 Johncl

作爲一個附加的註釋較好的分離，所以這是有可能的問題，因爲它的試圖將頭像浮在標籤中，這肯定不起作用。但我發現它很奇怪，但是html輸出與我的模板中的實際標記非常不同。 – Johncl

1）你應該避免邏輯視圖中的

2）最好是創建在控制器的標記的方法，例如

private isMe : boolean = false;

和動態地檢查它對於給定的消息列表

3）在視圖中使用css類顯示它

<div [class.my-custom-class-with-item-left]="isMe">

，在這裏給你的我已經注意到了，HTML輸出實際上包裝了一個離子標籤內的離子化身的關注:)

來源

2016-11-24 10:50:48 Zimas

好吧，我也嘗試了代碼中的整個表達式。它仍然不起作用。「item-right」屬性（注意它不是一個類）實際上存在於輸出html中，但是ion-avatar實際上並不在輸出/顯示中。但是，感謝3號小費的條件類看起來更乾淨。 – Johncl

如何將條件項目右側或項目左側添加到離子頭像？

回答

相關問題