Question

我有一个Ngx-bootstrap轮播，在此转盘内，我有一个“查看详细信息”按钮，可以打开一个模式，在此模式下，我还有另一个Ngx-bootstrap轮播。我的最大问题是，例如，当我打开模态并移动轮播的图像时，直到图像编号3，当我关闭此模态并打开另一个模态时，它开始向我显示来自imgane数3的轮播，也就是说，它不是从图像0开始的。我想破坏模态，以便每次打开它时，轮播会开始显示第一个图像中的图像。我该怎么办？我阅读了引导程序文档，并且有一个名为“ dispose”的函数应该用来破坏模式，但问题是它显示了一个错误。有人可以帮助我吗？我有几天尝试解决此问题，但找不到解决方案。预先感谢！

这是我的外部轮播，其中有“查看详细信息”按钮，用于打开模式：

<div class="container mt-2 mb-4" >
  <div class="d-flex justify-content-center align-items-center">

      <div class="d-flex align-items-center justify-content-center">
        <div> <span class="text-hot">
          <b>Lo más </b> </span> </div>
      </div>
      <div id="div-redondo" class="d-flex ml-2 align-items-center justify-content-center">
          <div class="text-hot align-middle">
              NUEVO
          </div>
      </div>
  </div>

  
  <div class="d-flex justify-content-center">
    <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Seleccione País
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a (click)="peticion()" class="dropdown-item" >Panamá</a>
      <a (click)="peticion1()" class="dropdown-item" >Colombia</a>
      <a (click)="peticion2()" class="dropdown-item" >Venezuela</a>
    </div>
    </div>
  </div>
  
</div>

<!-- Imagen de Pre-Carga-->
<div class="container-fluid d-flex justify-content-center" id="cont-preCarga" *ngIf="this.hostlistService.preCarga==true">
    <img src="../../assets/images/slider/spinner.gif">
</div>

<app-modal  [inmueble]="this.inmueble2" class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> </app-modal>



<carousel [itemsPerSlide]="itemsPerSlide"
          [singleSlideOffset]="singleSlideOffset"
          [interval]="false"
          [noWrap]="noWrap"
          [startFromIndex]="0"
          [showIndicators] ="false">
  <slide class="col-md-3 col-12 " *ngFor="let imagenPortada of  this.hostlistService.inmuebles; let index=index" style="width: 500px;">

    <img src="{{url}}{{imagenPortada.id}}_{{imagenPortada.fotos[0]}}" alt="imagen de slide" style="display: block; width: 100%; height: 200px;">
    <!--<img src="../../assets/images/slider/logo.png" alt="imagen de slide" style="z-index: 10; width: 100%; height: 300px; position: absolute; left: 0; top:0;">-->


    <div class="row mt-2">
      <div class="col-12">
        <p class="text-left text-precio"> <i class="fas fa-dollar-sign">
          </i> <b> {{imagenPortada.precio | currency: 'USD':true:'1.2-2'}} </b>
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col-12" style="height: 50px;">
        <p class="text-left"> <i class="fas fa-map-marker-alt"></i> <b> {{imagenPortada.pais}}, {{imagenPortada.estado}} </b>
        </p>
      </div>
    </div>
    <div class="row">
      <div class="d-flex col-12">
        <div class="cont-verDetalles d-flex justify-content-center">
          <button (click)="obtenerInfo(imagenPortada)" type="button" class="mt-2 btn btn-secondary" data-toggle="modal" data-target="#exampleModal2">Ver detalles</button>
        </div>
      </div>
    </div>
  </slide>
</carousel>

这是里面有另一个轮播的模式：

<div *ngIf="inmueble !== undefined">
  <!--<div *ngIf="inmueble.tipo=='CA' || inmueble.tipo=='APTO' ; else opcion"> -->
  <div class="modal-dialog modal-lg" aria-labelledby="modal" role="document">
    <div class="container-fluid">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>


      <div class="modal-body">

      <div class="row">
        <div class="modal-title text-center d-flex d-inline-flex justify-content-around align-items-center" style="background-color: #162342; width: 100%;" role="alert">
          <h5 class="pt-2 text-helvetica text-left text-blanco">  {{inmueble.nombre}}</h5>
          <h5 class="pt-2 text-helvetica text-right text-blanco"> {{inmueble.precio | currency: 'USD':true:'1.2-2'}}  </h5>
        </div>
      </div>

      <div class="row">
        <div class="col-md-12 col-12 mt-4">
          <carousel [itemsPerSlide]="itemsPerSlide"
            [singleSlideOffset]="singleSlideOffset"
            [interval]="false"
            [noWrap]="noWrap"
            [startFromIndex]="0" class="d-flex justify-content-center">
            <slide class="col-md-12" *ngFor="let imagen of inmueble.fotos; let indice = index; " style="max-width: 100%;">
                <!--<ngui-in-view>
                  <img class="img-fluid" *ngIf src="{{url}}{{inmueble.id}}_{{imagen}}" alt="imagen de slide" style="display: block; width: 100vw; height: 300px;">
                </ngui-in-view> -->


              <img class="img-fluid" src="{{url}}{{inmueble.id}}_{{imagen}}" alt="imagen de slide" style="display: block; width: 100vw; height: 300px;">

            </slide>
          </carousel>
        </div>
      </div>
      
            <div class="modal-footer justify-content-center">
          <button (click)="resetearModal()" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
      
      </div>

我在“关闭”按钮中使用以下代码将这种方法“重置模态”：

import { Component, OnInit, Input} from '@angular/core';
import { Inmueble } from '../modelos/inmueble';
import { HostlistService } from '../servicios/hostlist.service';
declare var jQuery:any;
declare var $:any;


@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit{

  url: string = "http://crm.seaconfiable.com/upload/";
  @Input() inmueble: Inmueble;
  //@Input() imagenInicial: number;
  itemsPerSlide = 1;
  imagenInicial = 0;
  singleSlideOffset = true;
  noWrap = true;

  //@Input() descrip: string;
  //@Input() nombre: string;
  //@Input() inmu: Inmueble;
  //@Input() seleccion: string;
  constructor(private hostlistService: HostlistService) { }


  ngOnInit() {
    //console.log("ModalComponent:  "+this.tipo);


  }



  resetearModal(){
    //this.inmueble.fotos=[];
    //console.log("modal111111111111111111");
    $('#modal').modal('dispose')
    //console.log("modal222222222222222222");

  }


}

但是当我单击“查看详细信息”按钮时，它在控制台中向我显示此错误：

是否有可能破坏引导模态4？

0 个答案: