невозможно отобразить модальное состояние в зависимости от состояния с помощью начальной загрузки 4 и угловой 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

Две проблемы с вашей реализацией:

Проблема 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 .

Answer 2

Вы забыли добавить еще заявление.Попробуйте это:

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