我试图在单击跟踪模式中的添加跟踪按钮时触发模型打开
<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);
}
}
}
现在,当我单击“添加跟踪”按钮时,模式不会出现
流程是这样的 首先用户单击添加跟踪按钮 带有表格的模型将打开并询问详细信息 当用户填写详细信息时,它将与跟踪服务交互