Question

我一直在处理angular2中的弹出框当我点击按钮时，应该只显示特定的弹出窗口请检查链接 https://embed.plnkr.co/8PypLpWxYABmeJVqAXTL/ 并帮助我摆脱这个问题

Answer 1

您let i = index

上遗漏了*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 https://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 {}

onclick只显示特定的弹出窗口

2 个答案: