Angular2 zeigen nur ein li Element Daten auf Klick

Question

Ich habe Slider mit 8 Elementen, das ist wiederholbare Modelle. Der Inhalt der Klasseninformationen sollte standardmäßig ausgeblendet sein. Ich mag sichtbare Informationen Inhalt Klick machen, aber für dieses Modell ein. Li Elemente Breite 200px und Höhe 200px ANG es Hintergrund-Bild haben. Wie man es optimal macht?

MyCode:

<ul class="slider"> 
    <li 
     class="slider__model" 
     *ngFor=" 
      let model of femaleModels | slice:this.bottomLimit:this.topLimit; 
      let i = index;" 
    > 
     <div class="info" (click)="toggleData();""> 
      <div class="model__content"></div> 
      <div class="model__text"> 
       {{ model.name | uppercase}}, {{model.dateOfBirth }} 
      </div> 
     </div> 
    </li> 
</ul> 

Answer 1

Sie können eine Eigenschaft für jedes Modell-Objekt hinzufügen, und diese Eigenschaft kann falsevisible und Verzug.

auf schweben, oder auf klicken, können Sie eine Funktion toggleVisibility(i), rufen Sie den Index des Elements übergeben. In der Funktion können Sie this.models[i].visible = !this.models[i].visible tun, die die visiblity schaltet.

In der Schleife Artikel, fügen Sie [class.visible]="model.visible". Nun jedes Mal ein Modell klicken, fügt es sichtbare Klasse. Wenn Sie erneut klicken, wird die sichtbare Klasse entfernt. Behandeln Sie die sichtbare Klasse entsprechend in Ihrem CSS.

Beispiel:

@Component({ 
    selector: 'my-component', 
    template: ` 
    <ul> 
     <li *ngFor="let model of models; let i = index" 
      [class.visible]="model.visible" 
      (click)="toggleVisibility(i)"> 
      {{model.name}} 
     </li> 
    </ul> 
` 
}) 
export class MyComponent { 
    models: any[] = [ 
     {name:'Foo',visible:false}, 
     {name:'Foo',visible:false}, 
     {name:'Foo',visible:false} 
    ]; 

    toggleVisibility(index: number) { 
     this.models[i].visible = !this.models[i].visible; 
    } 
} 

Um den gleichen Effekt zu erzielen, ohne eine visible Eigenschaft hinzufügen, können Sie die folgende (nicht getestet, können Sie haben es ein wenig zu modifizieren) tun:

@Component({ 
    selector: 'my-component', 
    template: ` 
    <ul> 
     <li *ngFor="let model of models" (click)="toggleVisibility($event)"> 
      {{model.name}} 
     </li> 
    </ul> 
` 
}) 
export class MyComponent { 
    models: any[] = [ 
     {name:'Foo'}, 
     {name:'Foo'}, 
     {name:'Foo'} 
    ]; 

    toggleVisibility(event: any) { 
     event.target.classList.toggle('visible'); 
    } 
}