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

您可以使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs</a> <ul class="dropdown-menu"> <li><a href="">Test</a></li> <li><a href="">Test</a></li> <li><a href="">Test</a></li> <li><a href="">Test</a></li> <li><a href="">Test</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs Beds & Bedding</a> <ul class="dropdown-menu"> <li><a href="">Test</a></li> <li><a href="">Test</a></li> <li><a href="">Test</a></li> <li><a href="">Test</a></li> <li><a href="">Test</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dogs Coats & Clothes</a> <ul class="dropdown-menu"> <li><a href="">Test</a></li> <li><a href="">Test</a></li> <li><a href="">Test</a></li> <li><a href="">Test</a></li> <li><a href="">Test</a></li> </ul> </li>或Map保持组件中切换的状态：

component.ts中的

Array

component.html中的

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

Angular2：在按钮上单击切换图像

1 个答案: