为什么我的对话框返回相同的信息?

时间:2018-07-06 04:16:47

标签: angular bootstrap-modal

我正在尝试在对话框中返回有关每个用户的详细信息,但是它一直仅返回第一个用户的信息! 实际上,当我将所有用户都放在表中时,我想在对话框中获取他们的信息,但是正如我所说,我只获得了first'one信息! 这是我的html代码:

          <div style="margin-top: 0px;" class="panel panel-primary">
       <div class="panel-heading">User's List</div>
     <div class="panel-body">
      <div class="form-group">
       <input type="text" placeholder="Name" [(ngModel)]="motCle" aria- 
       label="Search">
         <button class="btn btn-outline-success my-2 my-sm-0" style="border: 
         2px solid #4CAF50;border-radius: 20px;" (click)="chercher()"> <span 
         class="glyphicon glyphicon-search"></span>Search</button>
         <!-- (click)="openLg(content)" -->
          <button  type="button" class="btn btn-primary " routerLink="/new-user" data-dismiss="content" style="float: right;" >Add</button>
          </div>
          <table class="table table-striped">
        <tr>
        <th>ID</th>
         <th>Last Name</th>
         <th>First Name</th>
         <th>Email</th>
         <th>Username</th>
         <th>N° telephone</th>
          <th colspan="2">Actions</th>
        </tr>
        <tr *ngFor="let u of users">
           <td>{{u.id}}</td>
           <td>{{u.nom}}</td>
           <td>{{u.prenom}}</td>
          <td>{{u.email}}</td>
          <td>{{u.username}}</td>
         <td>{{u.num_tel}}</td>

          <td>

             <p class="text-right"><a href="#modal-advanced" data- 
             toggle="modal" 
               class="link-white">More Details</a></p>

                  <div class="modal fade" id="modal-advanced" >
                <div class="modal-dialog ">
          <div class="modal-content">
            <form>
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">About User</h4>
              </div>
              <div class="modal-body">
                <h5>User Details :</h5>
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <p >
                        Last Name :  <span>{{u.prenom}}</span><br/>
                        First Name :  <span>{{u.prenom}}</span><br/>
                        Phone Number :  <span>{{u.num_tel}}</span><br/>
                        Email :  <span>{{u.email}}</span><br/>

                      </p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="modal-footer">
                <button type="button" class="btn btn-default btn-theme" data-dismiss="modal">Close</button>
              </div>
            </form>
          </div>
        </div>
      </div>

      <!--   <button style="color: #4CAF50;" class="glyphicon glyphicon- 
          pencil" (click)="onEditUser(u.id)" ></button> -->
    </td>
    <td>
      <button style="color: red;" class="glyphicon glyphicon-trash" 
         (click)="deleteuser(u)" ></button>
    </td>
  </tr>
</table>
<div style="float: left" class="container">
     <ul  style="background-color: transparent;" class="nav nav-pills">
    <li  [ngClass]="{'active':i==currentpage}" *ngFor="let p of pages; let 
    i=index">
      <a style="color: blue;" class="clickable" (click)="gotoPage(i)">{{i}} 
    </a>
    </li>
         </ul>
      </div>
          </div>
     </div>

我应该如何解决此问题,感谢您的帮助

0 个答案:

没有答案