如何将ID传递给ngx-bootstrap模态以进行删除确认

Question

我正在使用Angular 6和NGX-Bootstrap

我有一个组件和服务，访问该页面后，可以使用Nodejs和Mongoose从mongodb数据库中检索所有“位置”。

我遍历了http get调用的结果，并将“位置”的名称放在表中。在表格的右边，以及填充表格的部分循环（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">&times;</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>

Answer 1

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">&times;</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>

将这样的数据传递给模型。

Answer 2

我发现在initialState之外创建一个回调方法是完成此操作的最简单方法。类似于this solution