问题描述
我有一个数据表,带有一个按钮,用于为每个表行打开一个模态(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
这样的新变量,并粘贴该事件中的数据,以便该变量仅包含您单击的变量。