[英]Angular Bootstrap modal is not working in Ngfor
I am using Angular 8, In this I need to do a popup in NgFor loop, the data is binding in popup modal but the same data is binding continously in the bootstrap modal...我正在使用 Angular 8,在此我需要在 NgFor 循环中弹出一个弹出窗口,数据在弹出模式中绑定,但相同的数据在引导模式中连续绑定...
My Html is我的 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">×</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>
How to iterate the bootstrap modal in ngfor.. In this same data is binding again and again..如何在 ngfor 中迭代引导模式 .. 在同一数据中一次又一次地绑定..
data-target=".bd-exampletwo-modal-lg{{i}}">
<div class="modal-dialog modal-lg" id="{{i}}"></div
I used this to iterate but not working How to Do that我用它来迭代但没有工作如何做到这一点
Bootstrap's JavaScript-based components, such as modal, do not work correctly with Angular. Bootstrap 的基于 JavaScript 的组件(例如 modal)无法与 Angular 一起正常工作。 It is best to use an Angular-specific library, such as ng-bootstrap or ngx-bootstrap .最好使用 Angular 特定的库,例如ng-bootstrap或ngx-bootstrap 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.