Angular2只顯示一個li元素數據點擊

Question

我有滑塊8個元素這是reperesent模型。班級信息的內容應該默認隱藏。我希望在點擊時顯示可見的信息內容，但是需要一個模型。 Li元素的寬度爲200px，高度爲200px，它具有背景圖像。如何做到最佳？

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

您可以將屬性添加到每個模型對象，該屬性可以visible並默認爲false。

在懸停或單擊時，您可以調用函數toggleVisibility(i)，傳遞該項目的索引。在該功能中，您可以執行切換可見性的this.models[i].visible = !this.models[i].visible。

在您的循環項目中，添加[class.visible]="model.visible"。現在，每次點擊模型時，都會添加可見類。當你再次點擊它會刪除可見的類。在你的css中相應地處理可見的類。

例子：

@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; 
    } 
} 

要獲得同樣的效果而不增加visible屬性，你可以做以下的（未測試，您可能需要稍作修改）：

@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'); 
    } 
}