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