如何解决Angular＆Bootstrap Modal
我有一个数据表，带有一个按钮，用于为每个表行打开一个模态（Bootstrap Modal）。
当我打开一行模式时，我希望从那一行获取数据。
它与"console.log (this.array[index])"一起使用。而且，当我打开Modal时，它总是向我显示表第一行的数据。
我认为我在模态中缺少索引参数。
预先感谢您的帮助。
我的TS文件：
export class ListeDevisComponent implements OnInit {
listeDevis = [];
constructor(private listeDevisService: ListeDevisService) {}
ngOnInit() {
this.listeDevisService.getListeDevis().subscribe(
(data: any) => {
this.listeDevis = data;
},(error) => {
console.error(error);
},() => {
console.log("Liste Devis Success");
}
);
}
voirIndexDevis(index) {
console.log(this.listeDevis[index]);
}
}
我的HTML文件：
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">ID Devis</th>
<th scope="col">Date Devis</th>
<th scope="col">Actions</th>
<th scope="col">Nom Complet</th>
<th scope="col">Contact</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let liste of listeDevis; let i = index">
<td>{{ liste.idDevis }}</td>
<td>{{ liste.dateDevis }}</td>
<td>
<button
class="btn btn-primary"
data-toggle="modal"
data-target="#exampleModal"
(click)="voirIndexDevis(i)"
>
Test Modal Actions
</button>
</td>
<td>{{ liste.nom }} {{ liste.prenom }}</td>
<td>{{ liste.email }}</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Liste Devis</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row" *ngFor="let liste of listeDevis; let i = index">
<div class="col-lg-3 col-12 border">
<h5>Type Installation :</h5>
{{ liste.typeInstallation }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Quantité :</h5>
{{ liste.qte }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Charge Nominale :</h5>
{{ liste.charge }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Nombres Arrêts :</h5>
{{ liste.arrets }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Type Gaine :</h5>
{{ liste.typeGaine }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Local Machinerie :</h5>
{{ liste.localMachinerie }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Mode Entrainement :</h5>
{{ liste.modeEntrainement }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Modèle :</h5>
{{ liste.modeles }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Couleur :</h5>
{{ liste.couleur }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Dimension Cabine :</h5>
{{ liste.dimensionCabine }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Plafond :</h5>
{{ liste.plafond }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Mirroir :</h5>
{{ liste.mirroir }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Porte Cabine :</h5>
{{ liste.porteCabine }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Accessoires :</h5>
{{ liste.accessoires }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Type Porte Paliers :</h5>
{{ liste.typePortePaliers }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Ouverture :</h5>
{{ liste.ouverture }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Passage Libre :</h5>
{{ liste.passageLibre }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Finition :</h5>
{{ liste.finition }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Votre Nom :</h5>
{{ liste.nom }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Votre Prenom :</h5>
{{ liste.prenom }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Destinataire :</h5>
{{ liste.destinataire }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Votre E-mail :</h5>
{{ liste.email }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Votre Numéro Tel :</h5>
{{ liste.telephone }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Votre Disponibilité :</h5>
{{ liste.disponibilite }}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Fermer
</button>
</div>
</div>
</div>
</div>
解决方法
要获取行数据，请传递liste而不是i：
(click)="voirIndexDevis(liste)"
然后，在组件文件中设置当前列表项：
export class ListeDevisComponent implements OnInit {
listeDevis = [];
currentListe;
constructor(private listeDevisService: ListeDevisService) {}
// ngOnInit removed for brevity
voirIndexDevis(liste) {
this.currentListe = liste;
}
}
然后调整模态，删除*ngFor并将安全导航运算符添加到currentListe.prop的每个实例中：
<!-- Modal -->
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Liste Devis</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-3 col-12 border">
<h5>Type Installation :</h5>
{{ currentListe?.typeInstallation }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Quantité :</h5>
{{ currentListe?.qte }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Charge Nominale :</h5>
{{ currentListe?.charge }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Nombres Arrêts :</h5>
{{ currentListe?.arrets }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Type Gaine :</h5>
{{ currentListe?.typeGaine }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Local Machinerie :</h5>
{{ currentListe?.localMachinerie }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Mode Entrainement :</h5>
{{ currentListe?.modeEntrainement }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Modèle :</h5>
{{ currentListe?.modeles }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Couleur :</h5>
{{ currentListe?.couleur }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Dimension Cabine :</h5>
{{ currentListe?.dimensionCabine }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Plafond :</h5>
{{ currentListe?.plafond }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Mirroir :</h5>
{{ currentListe?.mirroir }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Porte Cabine :</h5>
{{ currentListe?.porteCabine }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Accessoires :</h5>
{{ currentListe?.accessoires }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Type Porte Paliers :</h5>
{{ currentListe?.typePortePaliers }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Ouverture :</h5>
{{ currentListe?.ouverture }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Passage Libre :</h5>
{{ currentListe?.passageLibre }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Finition :</h5>
{{ currentListe?.finition }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Votre Nom :</h5>
{{ currentListe?.nom }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Votre Prenom :</h5>
{{ currentListe?.prenom }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Destinataire :</h5>
{{ currentListe?.destinataire }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Votre E-mail :</h5>
{{ currentListe?.email }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Votre Numéro Tel :</h5>
{{ currentListe?.telephone }}
</div>
<div class="col-lg-3 col-12 border">
<h5>Votre Disponibilité :</h5>
{{ currentListe?.disponibilite }}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Fermer
</button>
</div>
</div>
</div>
</div>
如果安全导航操作符（currentListe?.prop）不起作用，您还可以使用ngIf：
<div class="row" *ngIf="currentListe">
<!-- row data -->
</div>
替代解决方案
由于我们都喜欢选项，因此您也可以手动控制模式。首先，删除将行按钮连接到模式的逻辑：
<button
class="btn btn-primary"
(click)="voirIndexDevis(liste)"
>
Test Modal Actions
</button>
然后将逻辑添加到组件文件以显示/隐藏模态：
export class ListeDevisComponent implements OnInit {
listeDevis = [];
currentListe;
showModal: boolean = false;
constructor(private listeDevisService: ListeDevisService) {}
// ngOnInit removed for brevity
voirIndexDevis(liste) {
this.currentListe = liste;
this.showModal = true;
}
hideModal() {
this.showModal = false;
}
}
然后通过将*ngIf添加到外部div并更新右上角的关闭按钮和页脚按钮以在发生以下情况时调用hideModal()来更新模式显示/隐藏逻辑点击了：
<div
*ngIf="showModal"
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Liste Devis</h5>
<button
type="button"
class="close"
onclick="hideModal()"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- hide modal body for brevity -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="hideModal()">
Fermer
</button>
</div>
</div>
</div>
</div>
在voirIndexDevis函数中，您必须对服务文件执行相同的事件，但是这次仅收到带有发送的索引的listeDevis。但我建议您创建一个像Devis这样的新变量，并粘贴该事件中的数据，以便该变量仅包含您单击的变量。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。