Компоненты не отображаются в расширяемом списке

Question

Я создал расширяемый список в ионном приложении, чтобы просто разбить страницу и разделить ее на разделы.Список работает нормально, но ни один из ионных компонентов не будет отображаться внутри списка ионов, только обычный текст!

См. Код ниже.Я хочу добавить флажок для полосы, но он не отображается.

Есть идеи, как это исправить?Большое спасибо

<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>

Answer 1

В конце концов я сдался и пошел с Angular Material.Это ionic v3, поэтому вам нужны следующие зависимости:

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

В файле компонента TS:

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>

CSS все еще нуждается в некоторой работе для кнопок collapse.expand, но эти ионные компоненты работают на картах.