Question

我想使用angular2在bootstrap模式中显示我的数据。我使用'* ngFor'在模态中绑定了我的数据。但是使用* ngFor，模态不按行为显示数据（单击右箭头时，数据应该更改，并且第一个数据是默认值）。但是当我使用'item'应用活动类时，它以垂直格式显示完整数据。我希望它应该在一个图像中显示一个图像及其细节。

这是我的

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.

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

1 个答案: