Question

我在ionic应用程序上创建了一个可扩展列表，以将页面分为几部分。列表工作正常，但离子列表中不会显示任何离子成分，只能显示纯文本！

请参见下面的代码。我想为条纹添加一个复选框，但不显示。

任何想法如何解决？非常感谢

"SEARCH"

Answer 1

最后，我放弃并选择了Angular Material。它的离子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仍需要进行一些操作以使其折叠，展开按钮，但是此离子组件正在卡上工作。

组件不在扩展列表中显示

1 个答案: