2017-08-28 13 views
0

私は、ブートストラップ4ベータを使ってAngular 4アプリケーションを作成しています。ユーザーが画像をクリックすると、モーダルが表示されるのでカルーセルを停止します。モーダルが閉じられると、それはカルーセルを再開することができる。私が見つけたのは、カルーセルを読み込むときに、属性を変更しても新しい設定にバインドされないということです。私は5000から偽(ブール偽)に私のコンポーネントのintervalフィールドを切り替えるブーツストラップ4カルーセルの使用(Typescriptを使用)

<div #carousel id="carouselControls" class="carousel slide" data-ride="carousel" [attr.data-interval]="interval"> 
     <div class="carousel-inner" role="listbox"> 
      <div *ngFor="let image of images, let i = index" class="carousel-item" [ngClass]="{'active' : i == 0}"> 
       <img data-toggle="modal" data-target="#imageModal" (click)="zoom(image)" [src]="image"> 
      </div> 
     </div> 
     <a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev"> 
      <span class="fa fa-chevron-left" aria-hidden="true"></span> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next"> 
      <span class="fa fa-chevron-right" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
     </a> 
    </div> 

と私はそれをデバッグするときしかし、カルーセルはそれを受け入れるようには見えないことがわかります。私のHTMLです。私の質問は次のようなものです:Typescriptを使ってそれを切り替えるにはどうしたらいいですか?

答えて

0

JS/JQueryベースのバージョンのBootstrapを使用しているようです。 このようにすることは可能かもしれませんが、ライブラリはAngularのバインディングメカニズムを使用するようには設計されていません。

ngx-bootstrapは、Angularと相互運用するために作成されたBootstrapライブラリのバージョンであり、Angularのバインディングメカニズムを使用していると考えられます。

関連する問題