Question

我是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);
  }
}

Answer 1

我已经找到了这种解决方案（可以解决），我敢肯定有更好的方法，但是与此同时，它可以按预期工作。

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

图像未显示在ngb-carousel和angular 6中

1 个答案: