Angular 5 : 如何在 ngx bootstrap 模式中显示用户的详细信息？

Question

我正在使用 angular 5 作为前端，spring boot 作为后端，在 clients.component.html 我得到了我的数据库中存在的客户端列表 mysql.

我想做的是只显示少量信息，当用户单击名为 'user details' 的按钮时，他可以获得出现在 ngx bootstrap 模态中的其他信息。

这是 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">&times;</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包含了所有客户的所有信息，但是在table中我只显示了id, firstname, lastname，所以我想显示特定客户的其余这些信息模式如电子邮件、电话号码等..

编辑

模态框是空的，但我做了 consol.log(this.pageClient)，我得到了正确的结果，知道吗？

这是我点击客户 3 时得到的结果，实际上它是不正确的 100%

 {id: 3, username: "client2", password: "a$wmaJk/6uX0/iR1Itgey/AetV3WJotUiJKTNSXEV07ZfEa8o..yMXC", firstname: "useer", lastname: "sonoom", …}
cin
:
"ciin"
client
:
{id: 1, username: "admin", password: "a$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
:
"a$wmaJk/6uX0/iR1Itgey/AetV3WJotUiJKTNSXEV07ZfEa8o..yMXC"
prenom
:
"useer"
projects
:
[]
roles
:
[{…}]
tel
:
13153098
username
:
"client2"

Answer 1

理想情况下，您应该有 2 api 个。虽然它在你身上，一个用于显示列表，另一个用于显示特定选定的详细信息。

@ViewChild('largeModal') largeModal;
  public largeModalHide(): void {
      this.largeModal.hide();    
    }
  }
 public largeModalShow(): void {
      this.largeModal.show();    
    }
  }

单击列表或按钮时，调用获取详细信息的方法，获取详细信息后，使用详细信息初始化模式输入或表单并调用 largeModalShow()

尝试 pageClient 是否为数组：

<div class="modal-body">
        <div *ngFor="let p of pageClient">
         <p>{{p.id}}</p>
         <p>{{p.firstname}}</p>
         <p>{{p.lastname}}</p>
         <p>{{p.tel}}</p>
         <p>{{p.email}}</p>
        </div>
      </div>

在 Ts 中：

pageClients = new Array<any>();