如何在angular2中使用* ngFor绑定引导模式

Question

I want to display my data in the bootstrap modal using angular2. I have binded my data in modal using '*ngFor'. But using *ngFor, modal not showing data as per their behaviour(when clicking on the right arrow, data should change and first data come as default). but when I apply active class with the 'item', its showing complete data but in vertically format. And I want it should show one image and its detail in one's.

Here is my

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>

And my output which is coming from above code :

Answer 1

at first you need to organize the application, divide your application into components .

for example create a component represent the HTML template where *ngFor directive is mentioned in you application

the component TypeScript file

@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 = "";
       }
      }

and this is the component template, HTML file

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

---

now we have the component, lets use it in the appComponent.

inside the appComponent

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

inside the appComponent class you need to track the click event and reflect it to the variable currentIndex

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