简体   繁体   中英

Ionic 4 <button ion-item> not showing properly

I'm aiming for a page where there's a searchbar along with a list of items that are clickable. I've been using the code that's in ionic docs to make it happen but it's not giving me the right result. This is the code:

<ion-header>
  <ion-toolbar>
    <ion-title>Page</ion-title>
  </ion-toolbar>
</ion-header>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
      {{ item }}
      </button>  
    </ion-list>
</ion-content>

Yet when I look at it on the app it shows the items like normal buttons, like this: https://puu.sh/BNGId/d21ea0ef34.png

What am I doing wrong?

Edit: I am aiming for it to look like shown here https://ionicframework.com/docs/components/#list-lines

Actually solved the issue, it should be:

<ion-item button *ngFor="let item of items" (click)="itemSelected(item)">
  {{ item }}
</ion-item>  

Looks like the folks at Ionic made a mistake?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM