Components Not Displaying on Expandable List

Question

I have created an expandable list on ionic app to just break and account page into sections. List works fine but none of the ionic components will display inside the ion-list, only plain text!

See code below. I want to add a check box for stripe but it does not display.

Any idea how to fix this ? Many Thanks

<ion-content padding>
  <ion-list detail-none (click)="expandItem(item)" ion-item *ngFor="let item of items">
    <h2>{{item.name}}</h2>
      <expandable [expandHeight]="itemExpandHeight" [expanded]="item.expanded">
        <!-- account details -->
        <div *ngIf="item.name=='Details'">
          Details 
        </div>
  
        <!-- account address -->
        <div *ngIf="item.name=='Address'">
          Address 
        </div>
  
        <!-- account payment -->
        <div *ngIf="item.name=='Payment'">
          <div *ngIf="sripeConnect">
                Stripe Connected
          </div>

          <div *ngIf="!sripeConnect">
            <ion-item>
              <ion-label>Connect Stripe</ion-label>
              <ion-checkbox disabled="true"></ion-checkbox>
            </ion-item>
          </div>
        </div>
  
        <!-- account sectors -->
        <div *ngIf="item.name=='Sectors'">
          Sectors 
        </div>
  
      </expandable>

      <!-- buttons to expand/close section -->
      <button ion-button clear item-end color="sf-red" *ngIf="item.expanded"><ion-icon name="md-close"></ion-icon></button>
      <button ion-button clear item-end color="sf-red" *ngIf="!item.expanded"><ion-icon name="md-add"></ion-icon></button>
  </ion-list>

</ion-content>

seems like this line is likely to be your culprit: `*ngIf="item.name=='Payment'"` . although it looks fine, maybe the `item.name` isn't exactly `Payment` ? If it were, one of your div's should show up ("Stripe Connected" or "Connect Stripe"), but from the screenshot, they are not. — BizzyBob, Jun 02 '19 at 23:29
@BizzyBob, thanks for having a look. I ended up going with Angular Material. Spend hours trying get the ionc-list cards working and no joy! — Noel McKeown, Jun 03 '19 at 16:10

score 0 · Answer 1 · answered Jun 03 '19 at 16:07

In the end I gave up and went with Angular Material. Its ionic v3 so these are the dependencies you need:

"@angular/cdk": "^5.0.1",
"@angular/material": "^5.0.1",

In the component TS file:

import {MatCardModule} from '@angular/material/card';
import {MatButtonModule} from '@angular/material/button';

  constructor(public navCtrl: NavController, 
    public navParams: NavParams,
    public viewCtrl: ViewController) {

      this.items = [
        {
          name: "Details",
          expanded: true
        },
        {
          name: "Address",
          expanded: false
        },
        {
          name: "Payment",
          expanded: false
        },
        {
          name: "Sectors",
          expanded: false
        }
    ];
  }

<ion-content padding>

  <div detail-none (click)="expandItem(item)" *ngFor="let item of items">
    <mat-card>
        <mat-card-header>
           <mat-card-title style="font-size: 20px;">{{item.name}}</mat-card-title>
        </mat-card-header>
      
        <mat-card-content *ngIf="!collapsed">

           <!-- account details -->
        <div *ngIf="item.name=='Details'">
            Details 
          </div>
    
          <!-- account address -->
          <div *ngIf="item.name=='Address'">
            Address 
          </div>
    
          <!-- account payment -->
          <div *ngIf="item.name=='Payment'">
            
            <div *ngIf="sripeConnect">
                  Stripe Connected
            </div>
  
            <div *ngIf="!sripeConnect">
              <ion-item>
                <ion-label>Connect Stripe</ion-label>
                <ion-checkbox></ion-checkbox>
              </ion-item>
            </div>
  
          </div>
    
          <!-- account sectors -->
          <div *ngIf="item.name=='Sectors'">
            Sectors 
          </div>

        </mat-card-content>
        <mat-card-actions>
           <button ion-button clear item-end color="sf-red" (click)="collapsed=true"><ion-icon name="md-close"></ion-icon></button>
           <button ion-button clear item-end color="sf-red" (click)="collapsed=false"><ion-icon name="md-add"></ion-icon></button>
        </mat-card-actions>
      </mat-card>
    </div>

      <!-- buttons to expand/close section -->

</ion-content>

The CSS still needs some work for the collapse.expand buttons but this ion components are working on the cards.

Components Not Displaying on Expandable List

1 Answers1