首页 文章

如何添加条件项右或项左 - 离子化身？

提问于
浏览 次
0

我在获取条件属性item-left和item-right以处理离子项中的元素时遇到问题 . 如果我使用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>

如果我使用两个离子项对列表进行硬编码，每个离子项在各自的离子化身上都有item-left和item-right，它确实显示正确，但由于某种原因将其包装在ngFor中并不能很好地工作 . 正如我所提到的，研究html输出item-right实际上似乎是对html输出进行排序以实现item-left或right之间的差异所以看起来这些属性是编译时效果？

更新！我确实找到了使用* ngIf解决这个问题的一种方法，虽然相当难看，因为我不能在离子项上使用* ngIf，因为* ngFor已经作为重复元素 . 所以我没有在其下的每个标签上使用* ngIf . 下面是有效的代码，虽然很想知道更好的做法 . 将标签包装在两个div中不起作用，因为left-item和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>
angular ionic2

1 回答

  • 0

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

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

    private isMe : boolean = false;

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

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

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

    这让你更好地分离了关注点:)

    回复于

相关问题