我正在使用Angular 6和NGX-Bootstrap
我有一个组件和服务,在访问页面时,我从我的mongodb数据库中检索所有“位置” - 使用Nodejs和Mongoose。
我已经循环了http get调用的结果,并将'location'的名称放在表中。在表格的右边,以及填充表格的部分循环(ngFor)我添加了一个删除按钮。我想让用户单击该按钮,然后在删除之前提示使用警报模式。我的问题是将位置ID传递给模态,然后可以调用删除函数并传回ID(mongodb对象ID)
我很难弄清楚如何移动这些数据,因为我认为ngFor循环只包含对该范围的ID的引用,但模式由templateRef加载,并且该函数不会将另一个可通过的输入作为第二个参数。
任何帮助是极大的赞赏
- - 零件
import { Component, OnInit, TemplateRef } from '@angular/core';
import { LocationService } from '../services/location.service';
import { Observable } from 'rxjs';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { Location } from '../models/location.model';
import { NgForm } from '@angular/forms';
@Component({
templateUrl: './location.component.html',
styleUrls: ['./location.component.css']
})
export class LocationComponent implements OnInit {
public locations: Location[] = [];
addLocationForm = false;
modalRef: BsModalRef;
constructor(private locationService: LocationService, private modalService: BsModalService) {}
ngOnInit() {
this.locationService.loadAll().subscribe(result => {
this.locations = result;
});
}
showLocationForm() {
this.addLocationForm = !this.addLocationForm;
}
onSaveLocation(form: NgForm) {
if (form.invalid) {
return;
}
const location = {
name: form.value.name
};
this.locationService.saveLocation(location).subscribe(result => {
this.ngOnInit();
this.addLocationForm = !this.addLocationForm;
});
}
deleteLocation(id) {
this.locationService.deleteLocation(id).subscribe(result => {
console.log('Deleted location from inside the delete location function', id);
this.ngOnInit();
});
}
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template, { class: 'modal-sm' });
}
confirm(): void {
this.deleteLocation('10');
this.modalRef.hide();
}
decline(): void {
this.modalRef.hide();
}
}
----模板
<table class="table table-hover table-bordered">
<thead class="thead bg-info text-white">
<tr>
<th style="width: 85%" scope="col">Locations</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let loc of locations">
<td>{{ loc.name | titlecase }}</td>
<td>
<button class="actionBtn btn btn-warning">
<i class="fa fa-pencil-square-o"></i>
</button>
<button class="btn btn-danger" (click)="openModal(template)">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-info" (click)="showLocationForm()">Add Location</button>
<ng-template #template>
<div class="modal-header">
<h4 class="modal-title pull-left">Delete Location</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-center">
<p>Do you really want to delete this location?</p>
<button type="button" class="btn btn-primary" (click)="decline()">Cancel</button>
<button type="button" class="btn btn-default" (click)="confirm()">Delete</button>
</div>
</ng-template>
import { Component, OnInit, TemplateRef } from '@angular/core';
import { LocationService } from '../services/location.service';
import { Observable } from 'rxjs';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { Location } from '../models/location.model';
import { NgForm } from '@angular/forms';
@Component({
templateUrl: './location.component.html',
styleUrls: ['./location.component.css']
})
export class LocationComponent implements OnInit {
public locations: Location[] = [];
addLocationForm = false;
modalRef: BsModalRef;
constructor(private locationService: LocationService, private modalService: BsModalService) {}
ngOnInit() {
this.locationService.loadAll().subscribe(result => {
this.locations = result;
});
}
showLocationForm() {
this.addLocationForm = !this.addLocationForm;
}
onSaveLocation(form: NgForm) {
if (form.invalid) {
return;
}
const location = {
name: form.value.name
};
this.locationService.saveLocation(location).subscribe(result => {
this.ngOnInit();
this.addLocationForm = !this.addLocationForm;
});
}
deleteLocation(id) {
this.locationService.deleteLocation(id).subscribe(result => {
console.log('Deleted location from inside the delete location function', id);
this.ngOnInit();
});
}
openModal(template: TemplateRef<any>, data) {
this.locationData = data
this.modalRef = this.modalService.show(template, this.locationData);
}
confirm(data): void {
this.deleteLocation(data.id);
this.modalRef.hide();
}
decline(): void {
this.modalRef.hide();
}
}
模板
<table class="table table-hover table-bordered">
<thead class="thead bg-info text-white">
<tr>
<th style="width: 85%" scope="col">Locations</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let loc of locations; let index=index">
<td>{{ loc.name | titlecase }}</td>
<td>
<button class="actionBtn btn btn-warning">
<i class="fa fa-pencil-square-o"></i>
</button>
<button class="btn btn-danger" (click)="openModal(template, loc)">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-info" (click)="showLocationForm()">Add Location</button>
<ng-template #template>
<div class="modal-header">
<h4 class="modal-title pull-left">Delete Location</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-center">
<p>Do you really want to delete this location {{locationData.name}}?</p>
<button type="button" class="btn btn-primary" (click)="decline()">Cancel</button>
<button type="button" class="btn btn-default" (click)="confirm(locationData)">Delete</button>
</div>
</ng-template>
将这样的数据传递给模型。
我发现创建一个初始状态的回调方法是实现这一目标的最简单方法。与qazxsw poi相似