No lines are shown

Ionic Framework ionic-v3
1

Hello,

the cars are not displayed one below the other and how to get the separator lines between?


<ion-content>
  <ion-list>
    <button ion-button ngFor="let car of cars let i = index" (click)="carClicked(i)">
        {{ car.name}}
    </button>
  </ion-list>
</ion-content>
2

Hello,

you put your ngFor to button. Button is a inline element. You can add adirective for a block button or put your ngfor to a block element.

For ion-list take a look to the manuel. There is a section about dividers.

best reagrads, anna-liebt

3

An example that use <ion-list>, <ion-item-divider> and <button>:

    <ion-content>
      <ion-list no-lines>

        <ion-item-divider color="light">
          Navigate
        </ion-item-divider>
        <button ion-item menuClose detail-none *ngFor="let page of navigationPages" (click)="openPage(page)">
          <ion-icon item-start [name]="page.icon" color="light"></ion-icon>
          {{page.title}}
          <ion-icon item-end name="arrow-forward" color="light"></ion-icon>
        </button>

        ...

      </ion-list>
    </ion-content>

settings-page
settings-page.png373×665 156 KB

See: https://github.com/Robinyo/big-top/blob/master/src/app/app.html

1 Like