Angular 角度2：在按钮单击时切换图像

我有一个组件的动态视图，其中我从JSON获取了一些数据

现在我有一个问题，切换图像使用按钮

我可以使用*ngIf对单个项目进行管理，但由于所有数据都是动态生成的，因此页面上有多张卡。就我而言，有3张卡可用

视图：

这段代码工作正常，但它隐藏了一个部分的所有图像。我想隐藏与按钮索引相同的图像

如果单击按钮0，则仅隐藏索引为0的图像

---

我使用Host Listener进行了尝试，但无法正常工作。

您可以使用映射或数组在组件中保持切换状态：

in component.ts

在component.html中

<ng-container *ngFor='let html of templateData'>
    <h1 [innerHTML]="html.heading | safe:'html'"></h1>
    <div class='col-lg-12 col-md-12 col-xs-12 col-sm-12' [innerHTML]="html.description | safe:'html'"></div>
    <ng-container *ngFor='let data of html.cards;let i = index;'>
        <div class="container" [ngClass]="'data-'+i" >
            <img [src]="data.image" [alt]="data.alt" [title]="data.title" class="img-responsive" [ngClass]="'image-'+i" *ngIf="toggleImage"/>
            <div [innerHTML]="data.description" [ngClass]="'desc-'+i"></div>
            <button class="btn btn-default flip" (click)="fntoggleImage(i)">Toggle Image</button>
        </div>

        <div class='flip-slide-text' [innerHTML]="data.slide_text"></div>
    </ng-container>
</ng-container>

[
    {
        "heading": "<em><strong>Cards 2</strong></em>",
        "description": "<div><h2>What is Lorem Ipsum?</h2><p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>",
        "cards": [
            {
                "index": 0,
                "heading": "Card Heading",
                "image": "/assets/images/1c215e1b2a3b82efab1d0a07afc31f81.jpg",
                "alt":"Alt text for image",
                "title": "Title for Image",
                "description": "<div><h2>What is Lorem Ipsum?</h2><p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>",
                "slide_text": "<p>Slide text...</p><ol><li>Please enter your text here...Ple</li><li>ase enter your text </li></ol>",
                "audio_path": "path"
            },
            {
                    "index": 1,
                    "heading": "Card Heading",
                    "image": "/assets/images/1c215e1b2a3b82efab1d0a07afc31f81.jpg",
                    "alt":"Alt text for image",
                    "title": "Title for Image",
                    "description": "<div><h2>What is Lorem Ipsum?</h2><p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>",
                    "slide_text": "<p>Slide text...</p><ol><li>Please enter your text here...Ple</li><li>ase enter your text </li></ol>",
                    "audio_path": "path"
                }
        ]
    }
]

toggleImage: boolean = true;  
  fntoggleImage(index){
            this.toggleImage = !this.toggleImage;
        }

toggleMap: Array<boolean> = [];
toggle(i: number) {
    this.toggleMap.forEach(el => {
        el = false
    });
    this.toggleMap[i] = !this.toggleMap[i];
}

<img [src]="data.image" [alt]="data.alt" [title]="data.title" class="img-responsive" [ngClass]="'image-'+i" *ngIf="toggleMap[i]"/>