Question

我正在努力解决此问题...好吧，我有一个包含用户列表的表，每一行包含用户名以及两个用于更新的按钮和一个用于删除的按钮。更新按钮显示引导程序模式，其中包含要更新的用户名。我的问题是，当我单击更新按钮时，它只能显示所有其他行的第一行的值。

用户表：

mbClient.connect()

包含用于更新的模式的Single-use-component.html：

<table class="table table-hover "> 
      <thead> 
            <tr> 
                <th>#</th> 
                <th>Name</th>
                <th>Age</th>
                <th>Action</th> 
            </tr> 
       </thead>
          <tbody class="body">
          <ng-container *ngFor="let u of users"> 
              <tr class="active" 
                app-single-user
                [IdUser] =  "u.idUser"
                [NameUser] = "u.nameUser"
                (deleted)="onSubmit($event)"
              > 
              </tr>
        </ng-container>
      </tbody> 
    </table>

Single-use-component.ts

 <td scope="row">
            {{IdUser}}
      </td>
      <td>
            {{NameUser}}
      </td>
      <td>
            <button type="button" class = "btn btn-info" data-toggle="modal" data-target="#myModal"
                        (click)="initForm(NameUser)"><i class="fa fa-pencil-square-o"></i>
            </button>
                        &nbsp;
            <button type = "button" class="btn btn-danger"  (click)="deleteType(IdUser)"> 
                         <i class="fa fa-trash-o"></i> 
            </button>
      </td>


  <!-- The Modal -->
  <div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
       <form [formGroup]="myGroup">

          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Modal title</h4>
          </div>   
          <!-- Modal body -->
          <div class="modal-body">
            <div class="form-group" >
                  <label for="nom_tp">Libellé:</label>
                  <input type="text" class="form-control" id="nom_tp"  
                        formControlName="NameUserUpdate" required>
            </div>
          </div>   
          <!-- Modal footer -->
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-info" >Update</button>
          </div>
      </form>
        </div>
      </div>
    </div>

如何解决此问题，以使我的模态通过单击更新按钮来接收每一行的值。我尚未实现保存更新的功能。预先谢谢你。

Answer 1

在您的Single-use-component.html中，为每个模式和按钮data-target使用唯一的ID。

<button type="button" class = "btn btn-info" data-toggle="modal" [attr.data-target]="'#modal' + IdUser"
                    (click)="initForm(NameUser)"><i class="fa fa-pencil-square-o"></i>

和

<div class="modal fade" [id]="'modal' + IdUser">

Bootstrap Modal无法显示正确的数据

1 个答案: