0
角度4で複数のブートストラップモーダルを使用すると本当に問題があります。コードは1つのモーダルでうまくいきます。私は最初にロードされたモーダルのボタン/フォームを使用することができません。 2番目は正常に動作しています。第二モーダルを開いたり閉じたりした後、第一モーダルも動作します...奇妙です。何か間違っていますか？複数のブートストラップモダール（ngx-bootstrapとAngular）を使用する際のトラブル
<!-- 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">×</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">×</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) {
}お時間のみんなありがとう！
更新：コード内のモーダルシーケンスを切り替えると、問題が発生しますが、他のモーダルの点で問題が発生します。