javascript - jquery bootstrap 4 typescript。jqueryを使ってモーダルを閉じることが動作しない

私はTypeScriptコードでAngularプロジェクトの中で、jQueryを使ってBootstrapのモーダルを閉じようとしています。

コード:

HTMLでの関数呼び出し:

(click)="populaterfpfromsaved(i, createSaved, createProp )"

`createSaved` と `createProp` はモーダル上のローカル参照です

ここにモーダルについてあります：

<ng-template #createProp let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Request For Proposal</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">

....

<ng-template class="mw-100 w-75" #createSaved let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Saved RFPs</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body table-responsive">
    <table class="table table-hover">
      <thead>

....

そして私のTypeScriptのコード

populaterfpfromsaved(index, create, prop){
    console.log('it fired to open the rfp modal');
    const scoperfp = this.savedrfps[index];
    this.savedevent.name = scoperfp.eventname;
    this.savedevent.date = scoperfp.datename;
    this.savedevent.programdate = scoperfp.datevalue;
    this.savedevent.dateflex = scoperfp.dateflex;
    this.savedevent.eventpurpose = scoperfp.eventpurpose;
    this.savedevent.starttime = scoperfp.startime;
    this.savedevent.starttimeflex = scoperfp.starttimeflex;
    this.savedevent.endtime = scoperfp.endtime;
    this.savedevent.endtimeflex = scoperfp.endtimeflex;
    this.savedevent.headcount = scoperfp.headcount;
    this.savedevent.eventdetails = scoperfp.eventdetails;
    (<any>jQuery(create)).modal('hide');
    (<any>jQuery(prop)).modal('show');


  }

しかし助動詞は変わらない。

何か正しく設定できていないことがありますか

回答 #1

このように変更すれば、あなたにうまくいくかもしれません。一度試してみましょう。

あなたのHTMLファイルを変更してください,

<ng-template #createProp let-c="close" let-d="dismiss">

次のように <div class="modal" id='createProp'></div>

TypeScriptファイル

$('#createProp').modal('toggle');

モーダルを閉じたい場所には、この上の行を使用してください。

アプリにjQueryプラグインを含め、変数を宣言したことを確認してください

var $: any; と宣言する

angular.cli.json

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

詳細については、

Bootstrapモーダルを閉じる https://medium.com/@swarnakishore/how-to-include-and-use-jquery-in-angular-cli-project-592e0fe63176