angular - Bootstrap Modal 不显示正确的数据

Question

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

用户表:

<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.html:

 <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>

一次性组件.ts

myGroup: FormGroup;
name: String;

ngOnInit() {
    this.initForm(this.nom);
  }

initForm(nom_tp: any) {
    this.name= nom_tp;
    this.myGroup = this.formBuilder.group({
      NameUserUpdate: [this.name, Validators.required]
    });
  }

我如何解决这个问题，让我的模式通过单击更新按钮接收每一行的值。我还没有实现保存更新的功能。提前谢谢你。

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">