棱角5自举3.3.7轮播

Question

无法使自举轮播与角度5一起使用。数组短语只是短语对象数组。包括正在使用的组件，html和css。我想念什么？有任何线索/想法吗？

我想在页面顶部放置一个文本轮播。

谢谢。

export
  class Phrase {
  id: number;
  text: string;
  caption: string;
}

export
  class MotivatorComponent implements OnInit {
  phrases: Phrase[];

  constructor(private tasksService: TasksService) {
  }

  ngOnInit() {
    let phrases: Phrase[] = new Array();
    phrases[0] = new Phrase();
    phrases[0].id = 1;
    phrases[0].text = "be motivated1";

    phrases[1] = new Phrase();
    phrases[1].id = 2;
    phrases[1].text = "be motivated2";

    phrases[2] = new Phrase();
    phrases[2].id = 3;
    phrases[2].text = "be motivated3";
  }
}


<div id="TopCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#TopCarousel" attr.data-slide-to="idx" [class.active]="first" *ngFor="let p of phrases; let first=first; let idx=index;">
    </li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner" *ngFor="let p of phrases; let first=first; let idx=index; let last=last;">
    <div class="item text-carousel-item" [class.active]="first">
      <div class="text-carousel">{{p.text}}</div>
      <div class="carousel-caption">{{p.caption}}</div>
    </div>
  </div>
  <!-- Left and right controls -->
  <a class="left carousel-control"href="#TopCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#TopCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


.text-carousel {
  width: 100%;
  min-height: 100px;
  height: auto;
}

.text-carousel-item {
  text-align: center;
}