模态组件未显示

Question

我遇到 bootstrap 模态未显示的问题，我不知道如何修复它，因为控制台中没有显示任何内容。当我查看资源时 > styles.css 我可以看到我的项目中添加了一个 Bootstrap v5.1.3。

我的模态组件：

<button type="button" class="btn btn-primary float-right m-2" data-bs-toggle="modal" data-bs-target="#exampleModal" 
(click)="addClick()" 
data-backdrop="static" 
data-keyboard="false" >
    Add Coffee
  </button>
  
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">{{ModalTitle}}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
          (click)="closeClick()">
        </button>
        </div>
        <div class="modal-body">
          <app-add-edit-coffee [coffee]="coffee" *ngIf="ActiveAddEdditCoffee"></app-add-edit-coffee>
        </div>
      </div>
    </div>
  </div>

及其 .ts :

export class CoffeeComponent implements OnInit {
  ModalTitle:string="";
  coffee: any;
  ActiveAddEdditCoffee:boolean=false;
  constructor(private service:SharedService) { }

  CoffeeList: any = [];

  ngOnInit(): void {
    this.refreshCoffeeList();
  }

  refreshCoffeeList(){
    this.service.getCoffees().subscribe(data => {
      this.CoffeeList=data;
    })
  }
  addClick(){
    this.coffee={
      id:0,
      name:"",
      manufacturerId:"",
      countryId:"",
      beansProcessing:"",
      degreeOfRoasting:"",
      beanType:"",
      imgUrl:""
    }
    this.ModalTitle="Add coffee";
    this.ActiveAddEdditCoffee=true;
  }

  editClick(coffeeEdit: any){
    this.coffee=coffeeEdit;
    this.ModalTitle="Edit coffeee";
    this.ActiveAddEdditCoffee=true;
  }

  closeClick(){
    this.ActiveAddEdditCoffee=false;
    this.refreshCoffeeList();
  }

  deleteClick(coffeeDelete: any){
    this.service.deleteCoffee(coffeeDelete).subscribe(data => this.refreshCoffeeList());
  }
}

我的代码有什么问题以及如何修复它？

Answer 1

将此添加到您的 index.html 文件中

  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

然后在您的 .ts 文件中，将您的 addClick() 函数替换为：

addClick(){
$("#exampleModal").modal("show");
    this.coffee={
      id:0,
      name:"",
      manufacturerId:"",
      countryId:"",
      beansProcessing:"",
      degreeOfRoasting:"",
      beanType:"",
      imgUrl:""
    }
    this.ModalTitle="Add coffee";
    this.ActiveAddEdditCoffee=true;
  }

应该可行

模态组件未显示

Modal component not showing up

html

twitter-bootstrap

angular