Jquery 无法使用bootstrap 4&；根据条件显示模式；角度6

这里我有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>

  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链接

---

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

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

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

---

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

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

---

实施过程中存在两个问题：

问题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]来获取下拉列表中出现的

选择车辆
标签：

<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>


精选汽车
{{car.data}

获取数据
Modal1{{alert}
接近
模态2{{alert}
接近

您的实现有两个问题：

问题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]来获取下拉列表中出现的
选择车辆
标签：

<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>


精选汽车
{{car.data}

获取数据
Modal1{{alert}
接近
模态2{{alert}
接近

这里有一个。
但是使用这种方法，我看不到默认选择的选项您想看到的默认选择的选项是什么？选择汽车我已经更新了答案以满足您的需要。更新后的StackBlitz中也提供了这些更改。但是使用这种方法，我无法看到默认的选定选项。您希望看到的默认选定选项是什么？选择汽车我已更新了答案，以满足您的需要。更新的StackBlitz中也提供了这些更改。