1

Angular 4 内で複数のブートストラップ モーダルを使用するのに本当に問題があります。コードは 1 つのモーダルだけで正常に動作しています。最初に読み込まれたモーダルのボタン/フォームを使用できません。2番目は正常に動作しています。2番目のモーダルを開閉した後、最初のモーダルも機能します...奇妙です。何か問題がありますか？ 

<!-- ADD MODAL-->
<div bsModal #addModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myAddModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Add Dimension</h4>
        <button type="button" class="close" (click)="addModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="formGroupInput">TAG</label>
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" aria-describedby="keyHelp"
              value="" disabled>
            <small id="keyHelp" class="form-text text-muted">Notice that this field is a surrogate key!</small>
          </div>
          <div class="form-group">
            <label for="formGroupInput2">Name</label>
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input" value="">
          </div>
          <div class="form-group">
            <label for="formGroupInput3">Description</label>
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input" value="">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" id="dfsdfsdfsdf" class="btn btn-secondary" (click)="addModal.hide()">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- EDIT MODAL-->
<div bsModal #editModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Edit {{currentItem?.NAME}}</h4>
        <button type="button" class="close" (click)="editModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="formGroupInput">TAG</label>
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" aria-describedby="keyHelp"
              value="{{currentItem?.TAG}}" disabled>
            <small id="keyHelp" class="form-text text-muted">You'll need to delete this entry to change this key value!</small>
          </div>
          <div class="form-group">
            <label for="formGroupInput2">Name</label>
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input" value="{{currentItem?.NAME}}">
          </div>
          <div class="form-group">
            <label for="formGroupInput3">Description</label>
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input" value="{{currentItem?.COMM}}">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="editModal.hide()">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

import { Component, OnInit, ViewChild } from '@angular/core';
import { DataService } from "../data.service";
import { ModalDirective } from 'ngx-bootstrap/modal/modal.component';

@Component({

  templateUrl: './dimensions.component.html',
  styleUrls: ['./dimensions.component.scss']
})
export class DimensionsComponent implements OnInit {

  @ViewChild('editModal') public editModal: ModalDirective;
  @ViewChild('addModal') public addModal: ModalDirective;
  currentItem;

  openModal(item: any) {
    this.currentItem = item;
    this.editModal.show();

  }


  openAddModal() {
    this.addModal.show();

  }


  //Attributes
  public currentVar;
  subscription;
  dimensionData;
  rows;

  constructor(private _dataService: DataService) {


  }

お時間をありがとうございました！

更新: コード内でモーダル シーケンスを切り替えることによっても問題が発生しますが、他のモーダルに関してのみです。

4

2 に答える 2