Angular Bootstrap 模态在 Ngfor 中不起作用

Question

我正在使用 Angular 8， 在这我需要在 NgFor 循环中做一个弹出，数据在弹出模式中绑定，但相同的数据在引导模式中连续绑定......

我的 HTML 是

<tr *ngFor="let law of List; index as i">     
     <td>{{i+1}}</td>
     <td>
          <mat-form-field>
          <input matInput placeholder="Name" [formControl]="college">
          </mat-form-field>
     </td>
     <td>
           <button type="button" class="btn btn-primary"
            data-toggle="modal" data-target=".bd-example-modal-lg" (click)="data(law )"
             (click)="get()">Quantity</button>
     </td>
</tr>

<div class="modal fade bd-exampletwo-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
          <div class="modal-header">
            <h2 class="modal-title" id="exampleModalLabel">Delivary Details</h2>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                 <span aria-hidden="true">&times;</span></button>
         </div>
             <div class="modal-body">
                  <div>
                     <table ">
                        <thead>
                            <tr>
                              <th>Sl.No</th>
                                 <th>first Name</th>
                              </tr>
                        </thead>
                    <ng-container>
                         <tr [formGroupName]="j">
                              <td>{{j+1}}</td>
                              <td>
                               <td>      
                                <mat-form-field>
                                  <input matInput placeholder="firstname" formControlName="f_name</mat-form-field>
                               </td>
                        </tr>
                     </ng-container>    
                  </table>
                 </div>
                </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              </div>
               </div>
                  </div>
                    </div>

如何在 ngfor 中迭代引导模式 .. 在同一数据中一次又一次地绑定..

data-target=".bd-exampletwo-modal-lg{{i}}">

<div class="modal-dialog modal-lg" id="{{i}}"></div

我用它来迭代但不工作怎么做

Answer 1

Bootstrap 的基于 JavaScript 的组件（例如 modal）不能与 Angular 一起正常工作。最好使用 Angular 特定的库，例如 ng-bootstrap 或 ngx-bootstrap。