使用带有 Angular 的 Ionic 4 中的 Slider 看不到幻灯片中的组件

Question

我想要的效果是使用 switch 语句根据数据在幻灯片中加载不同的指定组件。我的问题是我在幻灯片中看不到任何内容，也没有收到错误消息。我认为这可能是 css 可以解决的问题，但是当我将组件的高度和宽度更改为 100% 时，我什么也看不到。我也尝试在组件上使用 fullscreen="true"。

在我的数据结构中，我有一个 "pageType" 数组，我想触发一个 switch 语句来打开指定的 angular 组件。

<ion-content>
  <ion-slides *ngIf="pages"
    [options]="sliderConfig">
    <ion-slide *ngFor="let index of pages">

  <div [ngSwitch]="index.pageType">
    <app-std-layout *ngSwitchCase="'std'" [flashCards]="index.flashCards"></app-std-layout>
    <app-std-layout *ngSwitchDefault [flashCards]="index.flashCards"></app-std-layout>
  </div>

    </ion-slide>
  </ion-slides>

</ion-content>

我的标准布局组件如下所示~

<ion-content fullscreen="true">

  <ion-grid>
    <ion-row>
      <ion-col *ngFor="let flashcard of flashCards">
          <app-flashcards [flashcard]="flashcard"></app-flashcards>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>

Answer 1

你的两个 switch 语句目前似乎都在尝试做同样的事情？

对于您的 app-std-layout，在代码中，您是否在 flashCards 上添加了 @Input() 以便提取信息？

你有没有试过在里面放一些正常的词，比如"TEST"，看看组件是否输出？

Answer 2

好的，所以我解决了我的问题。在 <app-std-layout> 组件中，我需要去掉 <ion-content> 标签

<ion-grid>
  <ion-row>
    <ion-col *ngFor="let flashcard of flashCards">
      <app-flashcards [flashcard]="flashcard"></app-flashcards>
    </ion-col>
  </ion-row>
</ion-grid>

我想 <ion-content> 标签不能相互嵌入。

使用带有 Angular 的 Ionic 4 中的 Slider 看不到幻灯片中的组件

Component in Slide not visible using Slider in Ionic 4 with Angular

angular

ionic4