Question

我有8个元素的滑块，它们是多余的模型。默认情况下，应隐藏课程信息的内容。我想在点击时制作可见的信息内容，但是对于那个模型。 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');
    }
}

Angular2在点击时只显示一个li元素数据

1 个答案: