Раскладка сетки для совы-карусели - PullRequest
Новая
       12

Раскладка сетки для совы-карусели

0 голосов
/ 13 мая 2019

Я использую ngx-owl-carousel, чтобы показать некоторые данные в моем проекте Angular. Проблема в том, что я хочу использовать Grid Layout, но не могу заставить его работать

Когда я пытаюсь реализовать grid, карусель говорит мне, что нет данных для рендеринга и ничего не отображается. То, что вы видите в моем коде, теперь является решением без сетки на моих таблицах матов.

Мне нужна помощь, чтобы выяснить, куда поместить мои дивы, чтобы я мог передвигаться по своим мат-столам. Куда бы я ни положил свои дивы, карусель перестает работать.

Спасибо. 

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

1 Ответ

1 голос
/ 21 мая 2019

Вы используете 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.

...