[英]Inputting data into a modal from a parent component Angular 5
我正在嘗試創建一個取消功能,該功能根據其ID取消特定的觀看。 我有一個視圖模型,可以從firebase中檢索它作為可觀察的模型,然后將其輸入到子div中。 問題是,當我單擊“取消”時,它總是取消頁面上的第一次查看,而不是我單擊的特定視圖。
奇怪的是,我在模態組件的同一級別上創建了一個新組件,以完全相同的方式輸入數據,並且效果很好。 它似乎只與不起作用的模式有關。
<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>
因此,就像一個重述:按鈕測試可以完美地工作,刪除我要刪除或取消的特定視圖。 但是使用模式,即使邏輯相同,也只會刪除頁面上的第一個視圖,並且我以完全相同的方式將數據傳遞給每個子組件。
在這里,一些工作示例讓我們嘗試一下,
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);
}
}
這是實現方便的簡單邏輯。 希望對您解決問題有幫助。
謝謝,
Muthukumar
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.