Ввод данных в модал от родительского компонента Angular 5

Question

Я пытаюсь создать функцию отмены, которая отменяет определенный просмотр на основе его идентификатора. У меня есть модель просмотров, которую я извлекаю из базы данных в виде наблюдаемой, а затем вводю ее в дочерний блок. Проблема в том, что когда я нажимаю кнопку отмены, он всегда отменяет первый просмотр на странице, а не тот, который я нажимаю.

Странно то, что я создал новый компонент на том же уровне, что и мой модальный компонент. Ввод данных точно таким же образом, и это прекрасно работает. Это только кажется модальным, что он не работает.

    <div class="col-md-3 buttons" [hidden]='!hidden' [@sliderDiv]="out">
      <button class="button button-primary button-sm button-green text-center"  (click)="updateViewingStatus()">Update Time</button>
      <button data-toggle="modal" data-target="#cancelModal" class="button button-primary button-sm button-previous text-center">Cancel Viewing</button>
</div >
    <viewings-cancel-modal [viewings]="viewings"></viewings-cancel-modal>
    <testing-cancel  [viewings]="viewings"></testing-cancel>
</div>

здесь я вводю свойство viewings в дочерние компоненты. Оба одинаковые.

это моя тестовая логика (с использованием только кнопки), которая отлично работает:

export class TestingCancelComponent implements OnInit {
  @Input() viewings: TenantViewingModel;
  private viewingsId;
  constructor(private _viewings: ViewingsService) {  }

  ngOnInit() {
    this.viewingsId = this.viewings.viewings_id;
    console.log(this.viewings.viewings_id)
  }

  updateViewingStatus() {
    this._viewings.updateViewingStatus(this.viewingsId);
  }

 }

И это моя модальная логика (она не работает):

export class PropertyViewingsCancelModalComponent implements OnInit {
  @Input() viewings: TenantViewingModel;
  private viewingsId;
  constructor(private _viewings: ViewingsService) {  }

  ngOnInit() {
    this.viewingsId = this.viewings.viewings_id;
    // console.log(this.viewings.viewings_id)
  }

  updateViewingStatus() {
    this._viewings.updateViewingStatus(this.viewingsId);
  }


}

Которые опять идентичны. HTML для рабочей кнопки выглядит следующим образом:

<button (click)="updateViewingStatus()"></button> 

и нерабочий модал:

<div class="modal" id="cancelModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="text-center modal_title"> Are you sure you want to </div>
        <h1 class="text-center" id="exampleModalLongTitle">Cancel Viewing? {{viewingsId}}</h1>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        </button>
      </div>
      <div class="modal-body">
        <div class="container">
          <img src="/assets/img/site/cancel.svg" alt="" style="height: auto; width: 100%; padding: 25px">
          <div class="row">
            <div class="col-md-6">
              <button data-dismiss="modal"  class="button button-primary button-xs button-previous text-center" (click)="updateViewingStatus()">confirm</button>
            </div>
            <div class="col-md-6 text-right">
              <button data-dismiss="modal" (click)="logViewings()"  class="button button-primary button-xs button-blue text-center">back</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Так же, как повтор: Тест кнопки работает отлично, удаляя определенный просмотр, который я хочу удалить или отменить. Но в модальном режиме он удаляет только первый просмотр на странице, хотя логика идентична, и я точно так же передаю данные каждому дочернему компоненту.

Answer 1

Вот рабочий пример, давайте попробуем это,

HTML-файл,

 <!--Pass your id as argument to your method.-->
 <button (click)="onCancel(id)" class="button button-primary button-sm button-previous text-center">Cancel Viewing</button>

<!--This button has been hiden element is used to call your method -->
<button type="button" class="hideElement" data-toggle="modal" data-target="#cancelModal" #cancelModal></button>

 <viewings-cancel-modal [viewings]="viewings"></viewings-cancel-modal>

Файл машинописного текста,

import {  ElementRef, ViewChild } from '@angular/core';

@ViewChild('cancelModal') private cancelModal: ElementRef;

public onCancel(id:number) {      
       //set some global variable has been id value
        localstorage.setItem("Id",id); //here set value as local storage.
       this.viewings.viewings_id=id;
       this.cancelModal.nativeElement.click();   //then here iam doing call that modal
    }

Модальный машинописный файл,

export class PropertyViewingsCancelModalComponent implements OnInit {
  @Input() viewings: TenantViewingModel;
  private viewingsId;
  constructor(private _viewings: ViewingsService) {  }

  ngOnInit() {
    //this.viewingsId = this.viewings.viewings_id;
     this.viewingsId = localstorage.getItem("Id"); //here iam getting id value in localstorage
    console.log("View Id",this.viewingsId) //here you getting your id you can proceed your process in modal button click time.
  }

  updateViewingStatus() {
    this._viewings.updateViewingStatus(this.viewingsId);
  }    
}

Это простая логика, которую вы должны реализовать по своему усмотрению. Я надеюсь, что это поможет решить вашу проблему.

Спасибо

Музукумар