Дисплей модальный Если условие истинно в Angular? - PullRequest
Новая
       74

Дисплей модальный Если условие истинно в Angular?

0 голосов
/ 29 апреля 2020

Я хочу отображать модальные только после того, как тикет успешно сгенерирован. Когда пользователь нажимает кнопку «mybutton», он открывает модальный режим только в случае отсутствия ошибки.

ticket.components.ts 

constructor(private _service: TicketService, private _idservice: SharedService) {
   }

generateTicket(){
    this._idservice.currentMessage.subscribe(message => this.userId = message)
    this._service.createTicketFromRemote(this.ticket, this.userId).subscribe(
      data => {
        console.log("response recieved");
        this.msg = "Ticket Successfully Generated";

        // code to display modal

      },
      error => {
        this.open_Modal = false;
        console.log("exception occured");
        console.log(error);

        // do nothing
      }
    )

  }

ticket.component. html


<button name="myButton" (click)="generateTicket()" class="btn btn-primary">Generate Ticket</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"> 
        <p class="text-center">Modal Body</p>
      </div>
      <div class="modal-footer"> 
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-warning">Print</button>
        <button type="submit" class="btn btn-primary"  data-dismiss="modal" >Edit</button>
      </div>
    </div>
  </div>
</div>

Ответы [ 3 ]

2 голосов
/ 29 апреля 2020

Модал класса имеет свойство css dispaly: нет, поэтому вам нужно добавить свойство dispaly: block, чтобы показать модал.

Html

Добавить ngClass директива для условного добавления o удалить showModal css class 

div class="modal fade" [ngClass]="{'showModal': openModal}" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    .......
</div>

In ts. 

generateTicket(){
    this._idservice.currentMessage.subscribe(message => this.userId = message)
    this._service.createTicketFromRemote(this.ticket, this.userId).subscribe(
      data => {
        console.log("response recieved");
        this.msg = "Ticket Successfully Generated";

        this.openModal = true; // <------ Like Jacopo Sciampi said

      },

Для закрытия модального. 

closeModal() {
   this.openModal = false;
  }

css 

.showModal {
   display:block;
}
1 голос
/ 29 апреля 2020

Вы можете просто использовать эту строку, чтобы открыть модал из вашего файла .ts 

 $('#exampleModalLong').modal('show');

Также не забудьте объявить знак доллара '$', используйте эту строку сразу после импорта в .ts файл 

declare var $: any;
0 голосов
/ 29 апреля 2020

Вы можете использовать простое ngIf для достижения этой цели: 

generateTicket(){
    this._idservice.currentMessage.subscribe(message => this.userId = message)
    this._service.createTicketFromRemote(this.ticket, this.userId).subscribe(
      data => {
        console.log("response recieved");
        this.msg = "Ticket Successfully Generated";

        this.open_Modal = true; // <------

      },
      error => {
        this.open_Modal = false;
        console.log("exception occured");
        console.log(error);

        // do nothing
      }
    )

  }

в html, добавьте ngIf в основной модальный div: 

<div *ngIf="open_Modal" class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"> 
        <p class="text-center">Modal Body</p>
      </div>
      <div class="modal-footer"> 
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-warning">Print</button>
        <button type="submit" class="btn btn-primary"  data-dismiss="modal" >Edit</button>
      </div>
    </div>
  </div>
</div>

Вы можете также оберните основной div в ng-container с помощью ngIf, вместо div, чтобы сделать код более чистым: 

<ng-container *ngIf="open_Modal">
<div  class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Modal Title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body"> 
            <p class="text-center">Modal Body</p>
          </div>
          <div class="modal-footer"> 
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-warning">Print</button>
            <button type="submit" class="btn btn-primary"  data-dismiss="modal" >Edit</button>
          </div>
        </div>
      </div>
    </div>
</ng-container>
...