如何将条件 item-right 或 item-left 添加到 ion-avatar？

Question

我在获取条件属性 item-left 和 item-right 以处理 ion-item 中的元素时遇到问题。如果我使用 item-left 和 item-right，似乎整个 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>  

如果我对一个包含两个 ion-item 的列表进行硬编码，每个 ion-item 在它们各自的 ion-avatar 上都有 item-left 和 item-right，它确实会正确显示，但由于某种原因，将其包装在 ngFor 中效果不佳。正如我所提到的，研究 html 输出 item-right 实际上似乎对 html 输出进行排序以实现 item-left 或 right 之间的差异，所以看起来这些属性是编译时效果？

更新！我确实想出了一种使用 *ngIf 来解决这个问题的方法，虽然相当难看，因为我不能在 ion-item 上使用 *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>  

Answer 1

1) 你应该避免视图中的逻辑

2) 最好在控制器中创建标志方法，例如

  private isMe : boolean = false;

并动态检查给定的消息列表

3) 在视图中使用 css 类显示它

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

这样可以更好地分离关注点:)