这里我有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');
}
下面是我的stackblitz链接
https://angular-arrsnp.stackblitz.io
在这里,如果不选择一个选项,则必须弹出一个模式,如果用户选择选项并按下按钮,则必须显示模式2
发布于 2018-09-17 00:38:40
您忘记添加else语句。试试这个:
getData(){
if (this.chooseView == null) {
this.alert = "Choose a option";
$('#alertOne').modal('show');
} else {
this.alert = "this is second modal";
$('#alertTwo').modal('show');
}
}
发布于 2018-09-17 00:41:46
您的实现有两个问题:
问题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>
这是一个Updated StackBlitz。
https://stackoverflow.com/questions/52356109
复制相似问题