So zeigen Sie das angeklickte Element in * ngFür die Liste Verstecken von anderen mit Angular 2

Question

Ich möchte das angeklickte Element in ngFof anzeigen, um Informationen anzuzeigen, die durch ngIf ausgeblendet sind. Wenn Sie jetzt auf ein Bild klicken, werden alle versteckten Elemente angezeigt. Wie zeigen Sie die Informationen des einzelnen angeklickten Bildes an?

Ich benutze jquery in meinem Beispiel nicht, weil ich es nicht zum Funktionieren bringen konnte. Ich möchte herausfinden, wie man es in angular2 macht, bevor man andere Lösungen akzeptiert. plunker

@Component({ 

    selector: 'hello-world', 
    template: 'src/hello_world.html', 
    directives: [FORM_DIRECTIVES, CORE_DIRECTIVES] 

}) 
export class HelloWorld { 

    clicked() {// only show clicked img info 
     e=event.target; 
     console.log(e); 
     this.show=!this.show; 
    }; 

    info = [{ 
    data: "information for img1:", 
    data2: "only the info img1 is displayed" 
    }, 
    { 
     data: "information for img2:", 
     data2: "only the info for img2 is displayed" 
    }, 
    { 
     data: "information for img3:", 
     data2: "only the info for img3 is displayed" 
    }] 
} 

<div *ngFor="#x of info"> 
<img src="http://lorempixel.com/150/150" (click)="clicked($event)" > 


    <div *ngIf="show"> 
     <div class="names"> 
     <div class="fullName">{{x.data}}</div> 
     <div>{{x.data2}}</div> 
     </div> 
    </div> 
</div> 

fand ich diesen Beitrag, der ein ähnliches Problem hat, wenn auch ich es nicht in meinem Code implementieren könnte. angular2-get-reference-to-element-created-in-ngfor

Answer 1

Jede Zeile Daten ein var show verwenden sollte: Hier ist mein Code:

export class HelloWorld { 
     public show:boolean = false; 
     clicked(index) {// only show clicked img info 
     console.log(this.things[index]); 
     this.things[index].show = !this.things[index].show; 
     }; 

    public things:Array<any> = [{ 
    data: "information for img1:", 
    data2: "only the info img1 is displayed", 
    show: false 
    }, 
    { 
     data: "information for img2:", 
     data2: "only the info for img2 is displayed" 
    }, 
    { 
     data: "information for img3:", 
     data2: "only the info for img3 is displayed" 
    }] 


} 

und in html

<h3>How to show info of clicked image only </h3> 

<div *ngFor="#x of things;#i = index"> 
<img src="http://lorempixel.com/150/150" alt="loading" (click)="clicked(i)" > 


    <div *ngIf="x.show"> 
     <div class="names"> 
     <div class="fullName">{{x.data}}</div> 
     <div>{{x.data2}}</div> 
     </div> 
    </div> 
</div> 

https://plnkr.co/edit/SR2Iguzrgd6DpquCZygc?p=preview

Answer 2

Nur wenn ich meine hinzufügen würde 2 Cent auf diese Frage, vor allem, weil, wenn Sie Daten von einembekommenkönnen Sie die Daten nicht so manipulieren, dass sie eine boolesche Eigenschaft haben, ohne zuerst auf das Array zu drücken und ein einfacheres Umschalten der Elemente zu ermöglichen.

Die *ngFor kann den Index mit einem einfachen *ngFor="let item of items; let i = index" halten. So können wir leicht herausfinden, welchen Index wir behandeln, wenn wir zuerst die (click) Aktion erreichen und diesen Index an die Methode (click)="action(i)" übergeben.

Die Methode kann dann eine Variable zuweisen, die in einer Bedingung in der *ngIf in dem Element verwendet werden kann, das Sie ein- und ausblenden möchten.

action(index){ 
    this.showElement = index; // assign variable to a number to be used in 
          // a conditional on the *ngIf 
} 

Wir haben jetzt eine Variable auf den geklickt Index gleich und eine bedingte daher erstellen kann die Variable basierend auf und der Index in der *ngFor Looping. So in der html können wir

<div *ngIf="showElement === i"> Toggled visibility element </div> 

So in der vom OP

component

export class HelloWorld { 
    public show:number; 

    constructor(){} 

    clicked(index){ 
     this.show = index; 
    }; 
} 

html

geschrieben Fall hinzufügen

<div *ngFor="let x of things; let i = index"> 
    <img src="http://lorempixel.com/150/150" alt="loading" (click)="clicked(i)" > 

    <div *ngIf="show === i"> 
     <div class="names"> 
     <div class="fullName">{{x.data}}</div> 
     <div>{{x.data2}}</div> 
    </div> 
</div> 

nicht sicher, ob es vielleicht eine bessere denke nicht, dass das Manipulieren der Daten das b ist est Ansatz, um die Ansichtsfunktion zu lösen.