模態組件不顯示-有解無憂

我有引導模式沒有顯示的問題，我不知道如何修復它，因為控制臺中沒有顯示任何內容。當我查看 sources > 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());
  }
}

我的代碼有什么問題以及如何修復它？

uj5u.com熱心網友回復：

將此添加到您的 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;
  }

那應該作業

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/367932.html

標籤：html 有角的推特引导

上一篇：嘗試在映射陣列內呈現API呼叫

下一篇：Boost轉換為向量誤差