Question

我在从两个（单独的）模态中读取数据时遇到问题。

我首先在页面上创建了一个模态，然后它运行良好，可以读取返回的数据，将其显示在表上，然后分别编辑/删除每个元素。

但是，当我添加第二个模式时，该模式的行为却有所不同。第一个仍然有效，但是第二个要么打印出错误，要么重复从第一个模式添加的最后一个元素。

这是我组件的代码

import { Component, OnInit, OnDestroy } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { Subscription } from 'rxjs/Subscription';

...

Component({
  selector: 'app-create-technique',
  templateUrl: './create-technique.component.html',
  styleUrls: ['./create-technique.component.scss']
})
export class CreateTechniqueComponent implements OnInit, OnDestroy {
  loading         : boolean = false;
  currentEditing  : number = -1;
  bsModalRef      : BsModalRef;
  bsModalRefTask  : BsModalRef;
  modalSub        : Subscription;
  modalTSub       : Subscription;

...

  constructor(
    private http: HttpClient,
    private toastr: ToastrService,
    private modalService: BsModalService,
    private modalServiceTask: BsModalService,
    private router: Router,
  ) { }


  ngOnInit() {

    this.createHandler();


    this.handleStuct();
    }

   ngOnDestroy() {
     this.destroyHandler();
   }

    addLearningObjective() {
      this.bsModalRef = this.setupModal();
    }

    defineStruct() {
      this.bsModalRefTask = this.setupModalTask();
    }

    private setupModal() : BsModalRef {
      let ref = this.modalService.show(CreateLearningobjectiveComponent, {class: 'modal-lg'});
      ref.content.behaviour_cat = this.behaviour_cat;
      return ref;
    }

    private setupModalTask() : BsModalRef {
      let ref = this.modalServiceTask.show(CreateTaskComponent, {class: 'modal-lg'});
      return ref;
    }

    private destroyHandler() {
      this.modalSub.unsubscribe();
    }

    private createHandler() {
      this.modalSub = this.modalService.onHide.subscribe(reason => {
        if (reason || this.bsModalRef.content.canceled) { // Backdrop click
          return;
        }

        let lo = this.transformModalData(this.bsModalRef.content.form);

        if (this.currentEditing !== -1) {
          this.form.learning_objectives[this.currentEditing] = lo;
          this.currentEditing = -1;
        } else {
          this.form.learning_objectives.push(lo);
        }

      });


    }

    private handleStuct() {
      this.modalTSub = this.modalServiceTask.onHide.subscribe(reason => {
        if (reason || this.bsModalRefTask.content.canceled) { // Backdrop click
          return;
        }

        let struct = this.transformModalData(this.bsModalRefTask.content.techniqueStruct.value);


        this.form.structure = Object.assign({}, struct);
        console.log(this.form.structure);

      });
    }

    private transformModalData(data: any) {
      return data;
    }

bsModalRefTask，modalTSub和modalServiceTask都引用第二个非工作模式。

是否有可能做我想做的事情，或者该如何解决？

Answer 1

bsModalRefTask，modalTSub和modalServiceTask都引用第二个非工作模式。

在您共享modalService和modalServiceTask的代码中，引用了同一服务：BsModalService。即this.modalService === this.modalServiceTask。据我所知，没有理由两次注入相同的服务。

this.modalService.onHide和this.modalServiceTask.onHide也相同。我想它们都将在任何模型触发onHide事件时触发。

我对'ngx-bootstrap/modal'不熟悉，但是我猜测它要么不支持多种模式，要么您使用不正确。

Answer 2

这似乎是一个已知问题

https://github.com/valor-software/ngx-bootstrap/issues/4490

来自多个模态的角度返回数据

2 个答案: