在带有Angular的Ionic 4中使用Slider看不见Slide中的组件

Question

My desired effect is to to have a different specified component load in a slide depending on the data using a switch statement. My issue is that I do not see anything in my slides and I'm not receiving an error. I think this may be an issue solvable by css, but when I change the components height and width too 100% I don't see anything. I have also tried using fullscreen="true" on the component.

In my data structure I have an array of "pageType"s that I want to trigger a switch statement to open a specified angular component.

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

My standard layout component looks as follows~

<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

Both of your switch statements seem to be trying to do the same thing at the moment?

For your app-std-layout , in the code, do you have the @Input() on the flashCards so that pulls the information in?

Have you tried putting some normal words inside like "TEST" just to see if the component is being output?

Answer 2

Ok so I solved my issue. In <app-std-layout> component I need to get rid of the <ion-content> tags

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

I suppose <ion-content> tags cannot be embedded in one another.