Javascript Angular-Hammerjs-在滑动操作中加载html内容

以下滑动操作将在模板中加载三个图像。他们目前的工作很好，但我想改变两个功能谷歌地图iframe和复选框和名称循环的图像

我尝试用html替换图像链接，并将

更改为

{{{avatar.content}}

，但模板将html视为纯文本

我最好的选择是什么

组件技术

SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' };

  avatars = [
    {
      content: 'https://semantic-ui.com/images/avatar2/large/kristy.png',
      visible: true
    },
    {
      content: 'https://semantic-ui.com/images/avatar2/large/matthew.png',
      visible: false
    },
    {
      content: 'http://semantic-ui.com/images/avatar/large/jenny.jpg',
      visible: false
    }
  ];

  // action triggered when user swipes
  swipe(currentIndex: number, action = this.SWIPE_ACTION.RIGHT) {
    // out of range
    if (currentIndex > this.avatars.length || currentIndex < 0) { return };

    let nextIndex = 0;

    // swipe right, next avatar
    if (action === this.SWIPE_ACTION.RIGHT) {
      const isLast = currentIndex === this.avatars.length - 1;
      nextIndex = isLast ? 0 : currentIndex + 1;
    }

    // swipe left, previous avatar
    if (action === this.SWIPE_ACTION.LEFT) {
      const isFirst = currentIndex === 0;
      nextIndex = isFirst ? this.avatars.length - 1 : currentIndex - 1;
    }

    // toggle avatar visibility
    this.avatars.forEach((x, i) => x.visible = (i === nextIndex));
  }

SWIPE_ACTION={左：“swipleft”，右：“swiperight”}；
化身=[
{
内容:'https://semantic-ui.com/images/avatar2/large/kristy.png',
可见：正确
},
{
内容:'https://semantic-ui.com/images/avatar2/large/matthew.png',
可见：假
},
{
内容:'http://semantic-ui.com/images/avatar/large/jenny.jpg',
可见：假
}
];
//用户刷卡时触发的操作
滑动（当前索引：编号，操作=此。滑动\u操作。右）{
//超出范围
如果（currentIndex>this.avatars.length | | currentIndex<0）{return}；
设nextIndex=0；
//向右滑动，下一个化身
if（action==此.swip\u action.RIGHT）{
const isLast=currentIndex==this.avatars.length-1；
nextIndex=isLast？0:currentIndex+1；
}
//向左滑动，上一个化身
if（action==此.swip_action.LEFT）{
const isFirst=currentIndex==0；
nextIndex=isFirst？this.avatars.length-1:currentIndex-1；
}
//切换化身可见性
this.avatars.forEach（（x，i）=>x.visible=（i==nextIndex））；
}

component.html

<div class="swipe-box" *ngFor="let avatar of avatars; let idx=index" (swipeleft)="swipe(idx, $event.type)" (swiperight)="swipe(idx, $event.type)"
    [class.visible]="avatar.visible" [class.hidden]="!avatar.visible">
    <div class="swipe-content">
        <img [src]="avatar.content" [alt]="">
    </div>
</div>

这是复选框循环：

<md-list>
    <md-list-item *ngFor="let guest of event['guests'] | keys">
        <md-icon md-list-icon><img class="event-img" src="http://lorempixel.com/70/70" /></md-icon>
        <h3 md-line> {{ guest.value.first_name }} {{guest.value.last_name}} </h3>
        <p md-line>
        </p>
        <span flex>
            <md-checkbox *ngIf="checkGuest(guest.key) === false" (change)="checkIn(guest.key)"></md-checkbox>
            <md-checkbox *ngIf="checkGuest(guest.key) === true" (change)="checkOut(guest.key)" [checked]="true === true"></md-checkbox>
        </span>
    </md-list-item>
</md-list>

{{guest.value.first_name}{{guest.value.last_name}

不确定困难在哪里。你有一个索引，可以跟踪你所在的位置以及你想展示的一些东西。只需使用一些条件跟踪该索引，并根据该索引显示不同的模板/html块/指令

<div *ngIf='currentIndex == 1'><img></div>
<div *ngIf='currentIndex == 2'><iframe></div>

---

在您的示例中，该模板逻辑将位于“.swipe content”div下。您可能需要稍微修改您的typescript代码，以便将currentIndex定义/跟踪为组件模板可用的变量（如果不可用）（看起来它只是传递到此处的函数中）。

尝试此库。它具有您所需的所有功能，并且易于使用

签入、签出功能在哪里