【发布时间】：2021-04-23 21:10:16
【问题描述】：
我正在 Angular 中创建一个应用程序，但我注意到模态无法正常工作。 我安装了 bootstrap 4.5.3 并在 style.css 文件中包含以下代码：
@import "~bootstrap/dist/css/bootstrap.css";
当我点击更新按钮时，它并没有打开相应的窗口。
下面的代码是app.module.ts：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import {DataTablesModule} from 'angular-datatables';
import { CustomerListComponent } from './customer-list/customer-list.component';
import { AddCustomerComponent } from './add-customer/add-customer.component';
@NgModule({
declarations: [
AppComponent,
CustomerListComponent,
AddCustomerComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
DataTablesModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CustomerListComponent } from './customer-list/customer-list.component';
import { AddCustomerComponent } from './add-customer/add-customer.component';
const routes: Routes = [
{ path: '', redirectTo: 'view-customer', pathMatch: 'full' },
{ path: 'view-customer', component: CustomerListComponent },
{ path: 'add-customer', component: AddCustomerComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { } customer-list.component.ts
import { Component, OnInit } from '@angular/core';
import { CustomerService } from '../customer.service';
import { Customer } from '../customer';
import { Observable,Subject } from "rxjs";
import {FormControl,FormGroup,Validators} from '@angular/forms';
@Component({
selector: 'app-customer-list',
templateUrl: './customer-list.component.html',
styleUrls: ['./customer-list.component.css']
})
export class CustomerListComponent implements OnInit {
constructor(private customerservice:CustomerService) { }
customersArray: any[] = [];
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any>= new Subject();
customers: Observable<Customer[]>;
customer : Customer=new Customer();
deleteMessage=false;
customerlist:any;
isupdated = false;
ngOnInit() {
};
this.customerservice.getCustomerList().subscribe(data =>{
this.customers =data;
this.dtTrigger.next();
})
}
deleteCustomer(id: number) {
.
.
.
}
updateCustomer(id: number){
this.customerservice.getCustomer(id)
.subscribe(
data => {
this.customerlist=data
},
error => console.log(error));
}
customerupdateform=new FormGroup({
customer_id:new FormControl(),
customer_name:new FormControl(),
customer_email:new FormControl()
});
updateCust(updcust){
this.customer=new Customer();
this.customer.customer_id=this.CustomerId.value;
this.customer.customer_name=this.CustomerName.value;
this.customer.customer_email=this.CustomerEmail.value;
this.customerservice.updateCustomer(this.customer.customer_id,this.customer).subscribe(
data => {
this.isupdated=true;
this.customerservice.getCustomerList().subscribe(data =>{
this.customers =data
})
},
error => console.log(error));
}
get CustomerName(){
return this.customerupdateform.get('customer_name');
}
get CustomerEmail(){
return this.customerupdateform.get('customer_email');
}
get CustomerId(){
return this.customerupdateform.get('customer_id');
}
changeisUpdate(){
this.isupdated=false;
}
} 客户列表.component.html
<div class="panel panel-default">
<div class="panel-heading">
<h1 style="text-align: center">Customers</h1><br>
<div class="row" [hidden]="!deleteMessage">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<div class="alert alert-info alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Customer Data Deleted</strong>
</div>
</div>
<div class="col-sm-4"></div>
</div>
</div>
<div class="panel-body">
<table class="table table-hover table-sm" datatable [dtOptions]="dtOptions"
[dtTrigger]="dtTrigger" >
<thead class="thead-light">
<tr>
<th>Customer Name</th>
<th>Customer Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let customer of customers ">
<td>{{customer.customer_name}}</td>
<td>{{customer.customer_email}}</td>
<td><button (click)="deleteCustomer(customer.customer_id)" class='btn btn-primary'><i class="fa fa-futboll-0">Delete</i></button>
<button (click)="updateCustomer(customer.customer_id)" class='btn btn-info'
data-toggle="modal" data-target="#myModal">Update</button>
</td>
</tr>
</tbody><br>
</table>
</div>
</div>
<div class="modal" id="myModal"> // HERE
<div class="modal-dialog"> // PROBLEM
<div class="modal-content"> // MODAL
<form [formGroup]="customerupdateform" #updcust (ngSubmit)="updateCust(updcust)">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" style="text-align: center">Update Customer</h4>
</div>
<!-- Modal body -->
<div class="modal-body" *ngFor="let customer of customerlist " >
<div [hidden]="isupdated">
<input type="hidden" class="form-control" formControlName="customer_id" [(ngModel)]="customer.customer_id">
<div class="form-group">
<label for="name">Customer Name</label>
<input type="text" class="form-control" formControlName="customer_name" [(ngModel)]="customer.customer_name" >
</div>
<div class="form-group">
<label for="name">Customer Email</label>
<input type="text" class="form-control" formControlName="customer_email" [(ngModel)]="customer.customer_email">
</div>
</div>
<div [hidden]="!isupdated">
<h4>Customer Detail Updated!</h4>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer" >
<button type="submit" class="btn btn-success" [hidden]="isupdated">Update</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" (click)="changeisUpdate()">Close</button>
</div>
</form>
</div>
</div>
</div> 【问题讨论】：
标签： angular bootstrap-4