Angular2：点击按钮切换图像

Question

我有一个组件的动态视图，其中我从 JSON.

获取了一些数据

现在我在使用按钮切换图像时遇到问题。

我可以使用 *ngIf 对单个项目进行管理，但是由于所有数据都是动态生成的，所以一个页面上有多个卡片。在我的情况下，有 3 张卡可用。

查看：

<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>

JSON:

[
    {
        "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;
        }

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

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

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

Answer 1

您可以使用 Map 或 Array 来保持组件中的切换状态：

在component.ts

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

在component.html

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

Angular2：点击按钮切换图像

Angular2: Toggle image on Button click

typescript

angular2-template

angular