角度 4 :如何在模态引导中发送用户的 ID

Question

我正在使用 Angular 4 作为前端和弹簧引导作为后端，我想使用引导模式在单击"用户详细信息"按钮时显示用户的详细信息。

这是客户端组件.html

<!--/.col-->
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<i class="fa fa-align-justify"></i> Information des clients
</div>
<div class="card-body">
<table class="table table-striped">
<thead>
<tr>
<th>Numéro</th>
<th>prenom</th>
<th>nom</th>
<th>Telephone</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let c of pageClients?.content">
<td>{{c.id}}</td>
<td>{{c.prenom}}</td>
<td>{{c.nom}}</td>
<td>{{c.tel}}</td>
<td><a (click)="delete(c)">delete</a> <a (click)="Edit(c.id)">Edit</a></td>
<td><button type="button" class="btn btn-primary relative waves-light" data-toggle="modal"  (click)="largeModal.show()">
user details
</button>
</td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li class="page-item" [ngClass]="{'active':i==currentPage}" *ngFor="let p of pages ; let i=index">
<a class="page-link" (click)="gotoPage(i)">{{i}}</a>
</li>
</ul>
</div>
</div>
</div>

<div bsModal #largeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" (click)="largeModal.hide()" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>One fine body&hellip;</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="largeModal.hide()">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

当我单击客户端的详细信息时，我得到一个大的模态，我想将ID发送到这个模态，以便我可以在其中包含所有特定用户的详细信息..

在客户端.component.ts 中：

import { Component, OnInit , ViewChild  } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {ClientService} from '../../../../../service/client.service';
import {Clients} from '../../Models/Clients';
import { ModalDirective } from 'ngx-bootstrap/modal';

@Component({
selector: 'app-clients',
templateUrl: './clients.component.html',
styleUrls: ['./clients.component.scss']
})
export class ClientsComponent implements OnInit {
pageClients:any;
pages:Array<number>;
currentPage:number=0;
page:number=0;
size:number=5;
public largeModal;
constructor(private router:Router,
private clientService:ClientService,
private route: ActivatedRoute) { }
ngOnInit() {
this.doSearch();
}
doSearch(){
this.clientService.getClients(this.currentPage,this.size)
.subscribe((data:any)=>{
this.pageClients=data;
this.pages=new Array(data.totalPages);
console.log(this.pageClients);
},err=>{
console.log('this is error');
})
}
gotoPage(i:number){
this.currentPage = i;
this.doSearch();
}
Edit(id:number){
this.router.navigate(['edit',id], { relativeTo: this.route });
}
delete(p:Clients){
let confirm = window.confirm('are you sur');
if(confirm==true){
this.clientService.deleteClient(p.id)
.subscribe(data=>{
this.pageClients.content.splice(
this.pageClients.content.indexOf(p),1
);
},err=>{
console.log(err);
})
}
}

}

知道吗？

Answer 1

您的模态与打开它的按钮位于同一组件中，以便您可以在组件自身中传递数据。

更改(单击(处理程序以将 id 传递给将在模态中引用的变量。

而不是(click)="largeModal.show()"，在组件中执行类似(click)="showModal(c.id)"的操作：

showModal(id: number) {
this.userId = id;
this.largeModal.show();
}