如何在* 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的單擊元素

回答

相關問題