的onclick只顯示特定的彈出

Question

我一直在angular2 顯示彈出框，當我在按鈕特定彈出單擊應該只得到顯示 請檢查鏈接 https://embed.plnkr.co/8PypLpWxYABmeJVqAXTL/ 和幫助我走出這個問題

Answer 1

您的您*ngFor

<div> 

    <div class="conform"> 
    <div class="details" *ngFor="let name of names; let i = index"> 

     <p>{{name.city}}</p> 
     <button (click)="clicked(i)" class="btn btn-primary">JOIN RIDE</button> 

     <div class="dialogBoxStyle" *ngIf="showIndex === i && showDialog"> 
     <p>Your Pickup Time:</p> 
     <p>8:30AM </p> 
     <p> 
      <button (click)="cancel()">cancel</button> 
      <button>confirm</button> 
     </p> 
     </div> 

    </div> 
    </div> 

</div> 

見plunker失蹤let i = indexhttps://plnkr.co/edit/HZdZE0?p=preview

Answer 2

問題是你有相同的showDialog所有的三個元素，每個對象應該有自己的showDialog和showBollean值。

//our root app component 
    import {Component, NgModule, VERSION} from '@angular/core' 
    import {BrowserModule} from '@angular/platform-browser' 

    @Component({ 
     selector: 'my-app', 
     template: ` 
     <div> 
    <div class="conform"> 
     <div class="details" *ngFor="let name of names"> 
      <p>{{name.city}}</p> 
      <button (click)="clicked(name)" class="btn btn-primary">JOIN RIDE</button> 


      <div class="dialogBoxStyle" *ngIf="name.showDialog"> 
       <p>Your Pickup Time:</p> 
       <p>8:30AM </p> 
       <p><button (click)="cancel()">cancel</button><button>confirm</button></p> 
      </div> 

     </div> 
    </div> 
</div> 
     `, 
    }) 

export class App { 
    names:string; 
    constructor() { 

     this.names = [ 
    { 

    "city": "Select one city", 
    "showDialog": false 
    }, 
    { 
    "showDialog": false,  
    "city": "Hyderabad" 
    }, 
    { 
    "showDialog": false,  
    "city": "Banglore" 
    } 
]; 

    public showDialog:boolean = false; 

    public showIndex:number; 
    clicked(name) { 
     console.log(name) 
    name.showDialog = true; 
    //this.showIndex = i; 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}