Bootstrap Modal 不显示正确的数据答案

【问题标题】：Bootstrap Modal doesn't display the right dataBootstrap Modal 不显示正确的数据
【发布时间】：2020-01-16 00:15:14
【问题描述】：

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

用户表：

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

包含更新模式的单次使用组件.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]
    });
  }

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

【问题讨论】：

标签： angular typescript bootstrap-modal angular-reactive-forms

【解决方案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">

【讨论】：

以上将起作用。但更好的选择是将模态从“一次性组件”中移出并将其放在父级中。所以模型元素不会在 DOM 中重复。并且可以通过事件发出来处理更新
是的@RavinSinghD，我同意你把模态放在父组件中是最好的解决方案。