无法使用 bootstrap 4 和 Angular 6 根据条件显示模态

Question

在这里我有 2 个模态和一个下拉列表，如果用户无法选择任何选项并按下按钮，则必须显示一个模态，如果用户选择下拉按钮，则必须显示另一个下拉列表。但是在这里我得到两个模态都在显示模态

下面是我的代码

.html代码

<div class="col-md-10">
<div class="form-group">
<span class="custom-dropdown">
<select id="SelectCars" class="form-control dropdown-class">
<option value="none" disabled>Select Cars</option>
<option *ngFor="let car of cars">
{{car.data}}</option>
</select>
</span>
</div>
</div>
<hr>
<button class="btn btn-primary" (click)="getData()">getData</button>

<div id="alertOne" class="modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<p class="modal-text">Modal1 {{alert}}</p>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-6 text-right">
</div>
<div class="col-sm-6 text-right alrt-btn-w">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="alertTwo" class="modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<p class="modal-text">Modal 2 {{alert}}</p>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-6 text-right">
</div>
<div class="col-sm-6 text-right ">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>

.ts 代码

alert:any;
chooseView:any = $('#SelectCars').val();

cars = [
{
data :"astonMartin"
},
{
data :"landrover"
},
{
data :"ferrai"
}
]
getData(){
if (this.chooseView == null) {
this.alert = "Choose a option";
$('#alertOne').modal('show');
}
this.alert = "this is second modal";
$('#alertTwo').modal('show');

}

下面是我的堆栈闪电战链接

https://angular-arrsnp.stackblitz.io

在这里，如果不选择一个选项，则必须弹出模态一个，如果用户选择选项并按下按钮并显示模态 2

Answer 1

你忘了添加 else 语句。试试这个：

getData(){
if (this.chooseView == null) {
this.alert = "Choose a option";
$('#alertOne').modal('show');
} else {
this.alert = "this is second modal";
$('#alertTwo').modal('show');
}
}

Answer 2

实现的两个问题：

问题 1：getData函数中应该有一个 else 语句。此外，一旦出现这种情况，您就可以检查chooseView变量上是否存在数据。

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
declare var $: any;
declare var require: any;
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
name = 'Angular';
alert: any;
chooseView = 'none';
@ViewChild('alertOne') alertOne: ElementRef;
@ViewChild('alertTwo') alertTwo: ElementRef;
cars = [{
data: "astonMartin"
},
{
data: "landrover"
},
{
data: "ferrai"
}
]
getData() {
if (this.chooseView && this.chooseView.data) {
this.alert = "this is second modal";
$('#alertTwo').modal('show');
} else {
this.alert = "Choose a option";
$('#alertOne').modal('show');
}
}

ngOnInit() {}
}

问题 2：在模板中，使用[(ngModel)]。您还必须使用 [ngValue] 使Select Cars标签显示在下拉列表中：

<div class="col-md-10">
<div class="form-group">
<span class="custom-dropdown">
<select 
id="SelectCars" 
class="form-control dropdown-class"
[(ngModel)]="chooseView">
<option [ngValue]="'none'" disabled>Select Cars</option>
<option *ngFor="let car of cars" [ngValue]="car">
{{car.data}}</option>
</select>
</span>
</div>
</div>
<hr>
<button class="btn btn-primary" (click)="getData()">getData</button>
<div #alertOne id="alertOne" class="modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<p class="modal-text">Modal1 {{alert}}</p>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-6 text-right">
</div>
<div class="col-sm-6 text-right alrt-btn-w">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>

<div #alertTwo id="alertTwo" class="modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<p class="modal-text">Modal 2 {{alert}}</p>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-6 text-right">
</div>
<div class="col-sm-6 text-right ">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>

这是一个更新的StackBlitz。