点击div出现在列表项目下方 - Ionic 3

Question

当它在按钮标签之外时，我无法看到div。但是当它进入时，我可以看到它。它是基本的显示 - 隐藏功能，但我不确定离子的工作方式，因为它在某些标签之外是不可见的。

page.html中

 <ion-list text-wrap>
    <ion-item-sliding *ngFor="let item of items">
      <button ion-item (click)="onDetails()">
        <ion-note item-left >note left</ion-note>
       <p>content</p>
        <ion-note item-end>note right</ion-note>

 <div *ngIf="details" type="text">
    <p>test</p>
  </div>
      </button>

    </ion-item-sliding>
  </ion-list>

component.ts

export class ItemPage {

  details: boolean = false;
  index: number;

  constructor(public navCtrl: NavController) {


  }
  ionViewDidLoad() {
  }


 onDetails(){
   this.details = !this.details;
 }



}

我认为这可能与点击未接收到正确的索引有关。