如何在angular2中使用* ngFor綁定引導模式

Question

我想使用angular2在引導程序模式中顯示我的數據。 我已經使用'* ngFor'將數據綁定到模式中。 但是使用* ngFor時，模式不會按照其行為顯示數據（單擊右箭頭時，數據應更改，並且第一個數據為默認值）。 但是當我將活動類與“項目”一起應用時，它會顯示完整的數據，但格式為垂直。 我希望它能顯示一張圖像及其細節。

這是我的

app.component.html

<div class="modal fade" id="feedbackModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" title="Close"> <span class="glyphicon glyphicon-remove"></span></button>
            </div>
            <div class="modal-body">
                <div class="row text-center">
                    <h4>Details</h4>
                </div>

                <div id="myGallery" class="carousel slide" data-interval="false">
                    <div class="carousel-inner">
                        <div class="item active" *ngFor="let modalData of cnnTableData">
                            <div class="row">
                                <div class="col-sm-6">
                                    <br>
                                    <img src={{modalData.Image}} style="width:100%;min-height: 211px;">
                                </div>
                                <div class="col-sm-6">
                                    <div>
                                        <h6><b>Image Name</b></h6>
                                        <small>{{modalData.Name}}</small>
                                    </div><br>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a class="left carousel-control" href="#myGallery" role="button" data-slide="prev" style="margin-left: -84px;"> <span class="glyphicon glyphicon-chevron-left"></span></a>
                    <a class="right carousel-control" href="#myGallery" role="button" data-slide="next" style="margin-right: -84px;"> <span class="glyphicon glyphicon-chevron-right"></span></a>

                </div>
            </div>
            <div class="modal-footer">
                <br><br>
            </div>
        </div>
    </div>
</div>

和我的輸出是從上面的代碼：

Answer 1

首先，您需要組織應用程序，將應用程序分為多個組件 。

例如，創建一個表示HTML模板的組件，其中在應用程序中提到了* ngFor指令

組件TypeScript文件

@Component({
        selector: 'my-component',
        templateUrl: 'my-component.html', // mentioned below
      })
      export class myComponent implements OnChanges, OnInit{
        @Input index:number;
        @Input selectedIndex:number;

        className:string;

       ngOnInit(){
         this.className = index==0?"active":"";
       }

       ngOnChanges(){
         if(selectedIndex == index)
           this.className = "active";
         else
           this.className = "";
       }
      }

這是組件模板HTML文件

<div [class]="'item' className">
   <div class="row">
      <div class="col-sm-6">
          <br>
              <img src={{modalData.Image}} style="width:100%;min-height: 211px;">
     </div>
     <div class="col-sm-6">
          <div>
             <h6><b>Image Name</b></h6>
             <small>{{modalData.Name}}</small>
          </div><br>
     </div>
 </div>

---

現在我們有了組件，可以在appComponent中使用它。

在appComponent內部

  <my-component *ngFor=" let modalData of cnnTableData ;#i = index" [index]="i" [selectedIndex]="currentIndex"> //current index is in the appComponent class </my-component> 

在appComponent類中，您需要跟蹤click事件並將其反映到變量currentIndex

 currentIndex:number = 0; clickLeft(){ this.currentIndex++; } clickRight(){ this.currentIndex--; } // take in account the length of the items.