Я работаю с угловым 5 в качестве внешнего интерфейса и весенней загрузкой в качестве внутреннего, в clients.component.html я получаю список клиентов, который существует в моей базе данных mysql.
Что я хочу сделатьэто показать только немного информации, и когда пользователь нажимает на кнопку, называемую «пользовательские данные», он может получить другую информацию, которая появляется в модале начальной загрузки ngx.
Это clients.component.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>Number</th>
<th>first name</th>
<th>last name</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let c of pageClients?.content">
<td>{{c.id}}</td>
<td>{{c.firstname}}</td>
<td>{{c.lastname}}</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)="getSpecifitClientDetails(c.id)">
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">×</span>
</button>
</div>
<div class="modal-body">
<div *ngFor="let p of pageClient?.content">
<p>{{p.id}}</p>
<p>{{p.firstname}}</p>
<p>{{p.lastname}}</p>
<p>{{p.tel}}</p>
<p>{{p.email}}</p>
</div>
</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 -->
Это client.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;
pageClient:any; //Specific user
pages:Array<number>;
currentPage:number=0;
page:number=0;
size:number=5;
@ViewChild('largeModal') largeModal;
userId:number;
constructor(private router:Router,
private clientService:ClientService,
private route: ActivatedRoute) { }
ngOnInit() {
this.doSearch();
}
getSpecifitClientDetails(id:number){
this.clientService.getClient(id)
.subscribe((data:any)=>{
this.pageClient = data;
this.largeModalShow();
},err=>{
console.log('this is error');
})
}
public largeModalHide(): void {
this.largeModal.hide();
}
}
public largeModalShow(): void {
this.largeModal.show();
}
}
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);
})
}
}
}
, поэтому атрибут pageClients содержит всю информацию обо всехклиенты, но в таблице я показываю только идентификатор, имя, фамилию, поэтому я хочу показать остальную информацию об определенном клиенте в модале в виде электронной почты, phoneNumber и т. д.
РЕДАКТИРОВАТЬ
Модал пуст, но я сделал consol.log (this.pageClient) и я получил правильный результат, есть идеи?
Thisэто то, что я получаю, когда нажимаю на номер клиента 3, на самом деле это не правильно 100%
{id: 3, username: "client2", password: "$2a$10$wmaJk/6uX0/iR1Itgey/AetV3WJotUiJKTNSXEV07ZfEa8o..yMXC", firstname: "useer", lastname: "sonoom", …}
cin
:
"ciin"
client
:
{id: 1, username: "admin", password: "$2a$10$UXzvwgqxM0HA5UyHu0Rx2OJD.jjPT1hZy.iRMhZ2UOCrLgkkaSqJe", firstname: "admii", lastname: "add", …}
contrats
:
[]
devlopper
:
null
email
:
"fat@gmail.com"
id
:
3
interventions
:
Array(0)
length
:
0
__proto__
:
Array(0)
nom
:
"sonoom"
password
:
"$2a$10$wmaJk/6uX0/iR1Itgey/AetV3WJotUiJKTNSXEV07ZfEa8o..yMXC"
prenom
:
"useer"
projects
:
[]
roles
:
[{…}]
tel
:
13153098
username
:
"client2"