Question

我正在使用ngx-owl-carousel在我的Angular项目中显示一些数据。问题是我想使用“网格布局”，但是我无法使其工作

当我尝试实现网格时，轮播告诉我没有要渲染的数据，什么也没有显示。您现在在我的代码中看到的是一种解决方案，在我的席子表上没有网格。

我需要帮助的是弄清楚将div放在哪里，以便可以在垫子桌子周围移动。无论我将div放在哪里，轮播都会停止工作。

谢谢。

<owl-carousel-o [options]="customOptions">
<div class="wrapper">
  <div *ngFor="let data of dataSources">
      <ng-container>
          <ng-template carouselSlide [id]="data.id">
    <mat-toolbar>
        <span class="title-center">{{data[0].serviceName}}</span>
    </mat-toolbar>
    <img class="png-icon" src="../../assets/images/jenkin.png">
     <!-- Change the image dynamically on servicetype-->
    <mat-table [dataSource]=data>
      <ng-container matColumnDef="jobnumber">
        <mat-header-cell *matHeaderCellDef>Job Number</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.jobNumber}} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.serviceName}} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="date">
        <mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.timestamp | date}} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="buildtime">
        <mat-header-cell *matHeaderCellDef>Buildtime</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.duration | date: 'mm:ss'}} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="result">
        <mat-header-cell *matHeaderCellDef>Result</mat-header-cell>
        <mat-cell *matCellDef="let element"><mat-basic-chip [ngClass]="element.result === 'ABORTED' || element.result === 'FAILURE' ? 'red' : 'green'"><p>{{element.result}}</p></mat-basic-chip></mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="jenkinsColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: jenkinsColumns;"></mat-row>
    </mat-table>
  </ng-template>
</ng-container>
  </div>
</div>
</owl-carousel-o>

.wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));
    grid-row-gap: 25px;
    grid-column-gap: 25px;
}

.mat-cell {
    color: white;
}

.mat-header-cell{
    color: white;
}

.mat-header-text {
  color: white;
}

.png-icon {
  width: 50px !important;
  height: 50px !important;
  margin-left: 175px;
  margin-top: 230px;

}
.mat-chip{
    background-color: #00ff00;
    margin-top: 5px;
    margin-bottom: 5px;
}

.warning-mat-chip {
    background-color: #ff0000;
}

.pending-mat-chip{
    background-color: #ffff00;
}

mat-toolbar {
  background: transparent;
}
.title-center {
  background: transparent;
  color: white;
  flex: 1 1 auto;
  text-align: center;
  margin-top: 560px;

}

mat-table {
    background: #425F6D;
    margin-left: 160px;
    margin-right: 150px;
    border-radius: 25px;
    border: 1px solid transparent;
    padding: 20px; 
}

.red {
  border: 2px solid #8B0000;
  background: #c40000;
}

.green {
  border: 2px solid #006400;
  background: #03bf00;
}

mat-basic-chip {
  width: 80px;
  text-align: center;
  border-radius: 20px;
}

Answer 1

您错误地使用了ngx-owl-carousel-o。

您只能将幻灯片的标记放入<owl-carousel-o [options]="customOptions">...</owl-carousel-o>中。您可以通过以下方式进行操作：

<owl-carousel-o [options]="customOptions">
  <ng-template carouselSlide>My slide markup 1</ng-template>  
  <ng-template carouselSlide>My slide markup 2</ng-template>  
  <ng-template carouselSlide>My slide markup 3</ng-template>  
</owl-carousel-o>

或以这种更短和增强的方式：

<owl-carousel-o [options]="customOptions">
   <ng-container *ngFor="let slide of slidesStore">
      <ng-template carouselSlide [id]="slide.id">
        <div class="slide-content-wrapper">slide.content</div>
      </ng-template>
   </ng-container>
</owl-carousel-o>

请注意<ng-template carouselSlide>。 carouselSlide是一种结构性指令，它接受其内容并在以后将其添加到轮播的所需位置。

您必须保留层次结构：

 <owl-carousel-o>
  <ng-template carouselSlide>
    ...

或

<owl-carousel-o>
  <ng-container *ngFor="let slide of slidesStore">
    <ng-template carouselSlide [id]="slide.id">
    ...

并避免HTML标签包裹<ng-template carouselSlide>。

我不知道您打算使用ngx-owl-carousel-o，但是从示例的CSS看，您似乎正在尝试排列6张幻灯片

.wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));
    grid-row-gap: 25px;
    grid-column-gap: 25px;
}

但是，您似乎在这里犯了错误。您将规则grid-template-columns加倍，第二条规则可能无法正常工作。 auto应该更改为任何物理值（例如px）。

要定义幻灯片的数量，请使用选项items。

猫头鹰轮播的网格布局

1 个答案: