如何在* ngFor列表中隐藏其他使用Angular 2的单击元素

我想要ngFof中的单击元素显示由ngIf隐藏的信息。现在，单击图像，将显示所有隐藏的元素。如何显示单击图像的信息？如何在* ngFor列表中隐藏其他使用Angular 2的单击元素

我没有在我的例子中使用jquery，因为我无法让它工作。我正在寻找如何在接受其他解决方案之前在angular2中做到这一点。 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>

我发现这个职位有虽然我不能在我的代码实现它类似的问题。 angular2-get-reference-to-element-created-in-ngfor

来源

2016-04-28 Kaspars Bergs

每一行数据时，应使用VAR show：这里是我的代码：

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" 
    }] 


}

，并在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

来源

2016-04-28 01:44:23 dieuhd

@JS_astronauts：我已经更新了我的答案 – dieuhd

如果“事物”数据来自外部资源，如何在不向“things”数组添加“show：false”属性的情况下完成此操作？ @dieuhd你有一个很好的解决方案，但打开的信息不会在选择其他人时关闭。 –

@JS_astronauts：你不需要''东西'中的declera'show'。 – dieuhd

就以为我加我2分这个问题，主要是因为如果你从获得数据如果不先将数据推入数组，并且希望更轻松地切换元素，则无法操作数据以具有布尔属性。

该*ngFor可以举行一个简单的*ngFor="let item of items; let i = index"索引。因此，我们可以很容易地找到我们在处理(click)操作时处理的索引，并将该索引传递给方法(click)="action(i)"。

该方法可以在要显示和隐藏的元素中分配一个变量，该变量可用于*ngIf中的条件中。

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

我们现在有一个变量等于点击数，因此可以创建一个条件基础上，变量和*ngFor循环索引。所以在html我们可以添加

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

所以在张贴的OP

component

export class HelloWorld { 
    public show:number; 

    constructor(){} 

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

html

<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>

不知道的情况下，如果有也许是一个更好的方式，只是不认为操纵数据是b est解决视图功能的方法。

来源

2017-03-28 13:40:13

如何在* ngFor列表中隐藏其他使用Angular 2的单击元素

回答

相关问题