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');


  }

下面是我的stackblitz链接

https://angular-arrsnp.stackblitz.io

如果不选择选项，则必须弹出模式1，如果用户选择选项并按按钮，则必须显示模式2

Answer 1

您忘记添加else语句。试试这个：

-e

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>

这里是Updated StackBlitz。

无法使用引导程序4和角度6根据条件显示模态

2 个答案: