Изображения не показаны с помощью ngb-carousel и angular 6 - PullRequest
Новая
       7

Изображения не показаны с помощью ngb-carousel и angular 6

0 голосов
/ 19 октября 2018

Я новичок в ng-bootstrap и тестирую ngb-carousel.Если я просто скопирую и вставлю пример со страницы, он будет работать отлично, но я не смогу заставить его работать с тем кодом, который я пишу.Я не вижу, чего мне не хватает.

Вот код mi

Это carousel.component.html 

<ngb-carousel *ngIf="contents" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
<ng-template ngbSlide *ngFor="let i of contents">
  <img [src]="i.imgRoute" alt="{{i.imgAlt}}">
  <div class="carousel-caption">
    <h3>No mouse navigation</h3>
    <p>This carousel hides navigation arrows and indicators.</p>
  </div>
</ng-template>


<div class="btn-group" role="group" aria-label="Carousel toggle controls">
<button type="button" (click)="showNavigationArrows = !showNavigationArrows" class="btn btn-outline-dark btn-sm">Toggle navigation arrows</button>
<button type="button" (click)="showNavigationIndicators = !showNavigationIndicators" class="btn btn-outline-dark btn-sm">Toggle navigation indicators</button>
</div>

А это мой carousel.component.ts 

import { Component, OnInit } from '@angular/core';
import { ContentService } from '../content.service';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.css'],
  providers: [NgbCarouselConfig]
})
export class CarouselComponent implements OnInit {
  contents = [];
  selectedIndex: number;
  transform: number;
  showNavigationArrows = false;
  showNavigationIndicators = false;
  test: string;
  constructor(config: NgbCarouselConfig, private _contentService: ContentService) {
    config.showNavigationArrows = true;
    config.showNavigationIndicators = true;
    this.selectedIndex = 0;
    this.transform = 100;
    this.test = 'https://picsum.photos/900/500/?image=939';
   }
  ngOnInit() {
    this._contentService.getContent()
        .subscribe(content => this.contents = content);
  }
}

1 Ответ

0 голосов
/ 25 октября 2018

Я нашел это решение (обойти), я уверен, что есть лучший способ, но в то же время он работает, как предполагалось.

Мой carousel.component.ts 

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ContentService } from '../content.service';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.css'],
  providers: [NgbCarouselConfig],
  encapsulation: ViewEncapsulation.Native
})
export class CarouselComponent implements OnInit {
  public contents = [];
  showNavigationArrows = false;
  showNavigationIndicators = false;
  constructor(config: NgbCarouselConfig, private _contentService: ContentService) {
    config.showNavigationArrows = true;
    config.showNavigationIndicators = true;
    this._contentService.getContent()
    .subscribe((content) => {
        content.forEach((cont) => {
          this.contents.push(cont);
        });
      }
    ); console.log('Subscribe'); console.log(this.contents); console.log(this.contents.length);
  }
  ngOnInit() {
    console.log('Init');
    console.log(this.contents);
  }
}

Мой carousel.component.html 

<ng-container *ngIf="contents; else loading">
    <ng-container *ngFor="let c of contents$ | async as contents">
    </ng-container>
</ng-container>
<ngb-carousel *ngIf="contents.length > 0">
  <ng-template ngbSlide  *ngFor="let cont of contents; let i = index" id="{{i}}" >
    <img [src]='cont.imgRoute' alt="{{cont.Alt}}">
    <div class="carousel-caption">
      <h3>{{cont.category}}</h3>
      <p>{{cont.excerpt}}</p>
    </div>
  </ng-template>
  <ng-template #loading>
    <h1>Loading</h1>
  </ng-template>
</ngb-carousel>
...