使用 Bootstrap 和 popper js 的 Angular 模型组件

Question

我试图在单击跟踪模式中的添加跟踪按钮时触发模型打开

<button (click)="toggleForm()" class="btn btn-primary">Add Tracking</button>

<div id="trackingModal" class="modal fade" tabindex="-1" *ngIf="showForm">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Tracking</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" (click)="toggleForm()"></button>
            </div>
            <div class="modal-body">
                <form *ngIf="showForm" (ngSubmit)="onSubmit()">
                    <div class="form-group">
                        <label for="receiver">Receiver</label>
                        <input type="text" class="form-control" id="receiver" [(ngModel)]="newShipmentData.receiver" name="receiver" required />
                    </div>
                    <div class="form-group">
                        <label for="price">Price</label>
                        <input type="number" class="form-control" id="price" [(ngModel)]="newShipmentData.price" name="price" required />
                    </div>
                    <div class="form-group">
                        <label for="pickupTime">Pickup Time</label>
                        <input type="datetime-local" class="form-control" id="pickupTime" [(ngModel)]="newShipmentData.pickupTime" name="pickupTime" required />
                    </div>
                    <div class="form-group">
                        <label for="distance">Distance</label>
                        <input type="number" class="form-control" id="distance" [(ngModel)]="newShipmentData.distance" name="distance" required />
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" (click)="toggleForm()">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

这是 traking.ts 代码

import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
import { ShipmentData, TrackingService } from "../tracking.service";
import { ShipmentStatusPipe } from "../shipment-status.pipe";

@Component({
  selector: "app-tracking",
  standalone: true,
  imports: [FormsModule, CommonModule, ShipmentStatusPipe],
  templateUrl: "./tracking.component.html",
  styleUrls: ["./tracking.component.css"],
})
export class TrackingComponent implements OnInit {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  shipments: ShipmentData[] = []; // Temporary - adjust based on your service

  showForm = false;

  newShipmentData!: ShipmentData;

  @ViewChild("trackingModal") trackingModal!: ElementRef;

  constructor(private trackingService: TrackingService) {}

  ngOnInit() {
    this.trackingService.getAllShipment().then((shipments: ShipmentData[]) => {
      this.shipments = shipments;
    });
    this.newShipmentData = {
      sender: "",
      receiver: "",
      price: "0",
      pickupTime: Date.now(),
      deliveryTime: 0,
      distance: 0,
      isPaid: false,
      status: 0,
    };
  }

  toggleForm() {
    this.showForm = !this.showForm;
    console.log(this.trackingModal, this.showForm);
  }

  async onSubmit() {
    try {
      // Call your service to create the shipment
      await this.trackingService.createShipment(this.newShipmentData);

      // Handle success (e.g., close the form, display a success message)
      this.showForm = false;
      console.log("Shipment created successfully");

      // Reset the form
      this.newShipmentData = {
        sender: "",
        receiver: "",
        price: "0",
        pickupTime: Date.now(),
        deliveryTime: 0,
        distance: 0,
        isPaid: false,
        status: 0,
      };
    } catch (error) {
      // Handle errors from the TrackingService
      console.error("Error creating shipment:", error);
    }
  }
}

现在，当我单击“添加跟踪”按钮时，模式不会出现

流程是这样的 首先用户单击添加跟踪按钮 带有表格的模型将打开并询问详细信息 当用户填写详细信息时，它将与跟踪服务交互

Answer 1

您的代码中的一切都很完美。 即使我在本地添加了你的代码。

也许你的元素隐藏在其他元素后面或者某些CSS被覆盖。

您能否提供 stackbiltz，以便提供更多帮助。