我应该在我的模式中添加什么来显示？

Question

我有以下 html 文件，但模式不会显示。我必须在这里添加一些东西，还是添加到其他地方？我是否也必须编写一个按钮 onclick 函数？它应该在按下“删除”按钮时显示。

<div class="card-group"  *ngIf="view == true">
      <div>
        <button (click)="changeView()">List view</button>
      </div>
      <div class="card-body" *ngFor="let driver of drivers" >
        <h5 class="card-title">{{ driver.name}}</h5>
        <h6 class="card-subtitle mb-2 text-muted">{{ driver.team}}</h6>
        <button (click)="updateDriver(driver.id)" class="btn btn-outline-info">
          Update
        </button>
        <button class="btn btn-outline-danger" style="margin-left: 10px" data-toggle="modal" data-target="#exampleModal">
          Delete
        </button>
        <button (click)="driverDetails(driver.id)" class="btn btn-outline-info" style="margin-left: 10px">
          Details
        </button>
      </div>
    </div>
    
    
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" *ngFor="let driver of drivers" >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button (click)="deleteDriver(driver.id)" type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

Answer 1

需要进行一些小改动。

*ngFor="let driver of drivers" 将创建多个具有相同 ID exampleModal 的 div。 ID 必须是唯一的。

尝试删除循环或每次都赋予唯一的每个 id，然后在删除按钮 data-target="" 属性中使用该 id。

根据要求，您应该考虑使用BehaviorSubject。
https://www.learnrxjs.io/learn-rxjs/subjects/behaviorsubject

1. 创建一个包含模态 html 的组件。
2. 创建带有行为主题的服务。
3. 在模态组件和您的组件中注入服务。
4. 您的组件将使用.next() 方法将驱动程序的值传递给行为主体
5. 新创建的模态组件将订阅行为主题变量，并将获取从组件传递的新值。然后您可以相应地填充模态 html。
6. 当用户单击“确认删除”时，您将更改值并将其传递给您的初始组件并执行删除 api 调用。

Answer 2

尝试将以下代码中的 data-target 和 data-toggle 分别更改为 data-bs-target 和 data-bs-toggle。

<button
    class="btn btn-outline-danger"
    style="margin-left: 10px"
    data-toggle="modal"
    data-target="#exampleModal">Delete</button>