javascript - 从父组件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>
这是我在子组件中输入查看属性的地方。两者相同。
这是我完美运行的测试逻辑(仅使用一个按钮):
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);
}
}
这是一个简单的逻辑,你必须实现你的方便。我希望它有助于解决您的问题。
谢谢,
穆图库马尔
推荐阅读
- python - 移动文件:匹配部分文件/目录条件(姓氏、名字) - Glob、Shutil
- python - Pymysql 语法错误,我不明白
- python - 简单使用“import as”加载多场景数据?
- ruby-on-rails - 为什么 Chrome 驱动程序崩溃或元素不在 Cron 作业中?
- php - 如何使用 guzzlehttp 客户端将身份验证类型设置为抢占式
- php - 添加 xml-stylesheet 标签 simpleXML php
- sql - 删除 SQL 行和所有依赖项
- django - 将选定的下拉值从 react js 发送到 django ORM
- php - 在每个循环中输出某个 $_SESSION 变量
- java - I can not retrieve the current custom user object from Spring Security Context