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

【问题标题】：How to bind bootstrap modal using *ngFor in angular2如何在angular2中使用*ngFor绑定引导模式
【发布时间】：2017-07-04 05:42:41
【问题描述】：

我想使用 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>

我的输出来自上面的代码：

【问题讨论】：

你是否也在弹出窗口中实现了*ngFor？那有必要吗？

标签： angular angular2-template angular2-directives

【解决方案1】：

首先您需要组织应用程序，将您的应用程序划分为组件。

例如，创建一个组件来表示您的应用程序中提到 *ngFor 指令的 HTML 模板

组件 TypeScript 文件

@零件（{ 选择器：'我的组件'， templateUrl: 'my-component.html', // 下面提到 }) 导出类 myComponent 实现 OnChanges、OnInit{ @输入索引：数字； @输入选定索引：数字；类名：字符串； ngOnInit(){ this.className = index==0?"active":""; } ngOnChanges(){ 如果（选择索引 == 索引） this.className = "活跃"; 别的 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 类中，您需要跟踪点击事件并将其反映到变量 currentIndex

currentIndex:number = 0;

clickLeft(){
  this.currentIndex++;
}

clickRight(){
  this.currentIndex--;
}

// take in account the length of the items.

【讨论】：