时间戳

首页 > 解决方案 > Angular 4：如何在模态引导程序中发送用户的 ID

angular - Angular 4：如何在模态引导程序中发送用户的 ID

问题描述

我正在使用 Angular 4 作为前端，使用 Spring Boot 作为后端，我想在单击“用户详细信息”按钮时使用引导模式来显示用户的详细信息。

这是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>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 发送到这个模态，以便我可以在其中包含所有特定用户的详细信息..

在 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;
  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);
        })
    }
  }


}

任何想法 ？

标签： angularbootstrap-4bootstrap-modalangular5

解决方案

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

更改您的（单击）处理程序以将 id 传递给您将在模式中引用的变量。

而不是(click)="largeModal.show()", 做类似的事情(click)="showModal(c.id)", 然后在你的组件中：

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

推荐阅读