Question

有没有办法在服务器的解析器中打开模态？现在它给了我错误。

RegistroComponent.html:98 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

这是代码。

import { Component, OnInit, Input, ViewContainerRef } from '@angular/core';

import { TipoEquipoService } from '../../tipo-equipo/tipo-equipo.service';
import { MarcaService } from '../../marca/marca.service';
import { RangoService } from '../../rango/rango.service';
import { EmpleadoService } from '../../shared/services/empleado.service';
import { EquipoService } from './../equipo.service';
import { ResponsableService } from '../../shared/services/responsable.service';

// Models
import { Equipo } from './../equipo';
import { TipoEquipo } from '../../tipo-equipo/tipo-equipo';
import { Marca } from '../../marca/marca';
import { Rango } from '../../rango/rango';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/of';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastsManager } from 'ng2-toastr/ng2-toastr';
import { ConfirmComponent } from '../../shared/components/confirm/confirm.component';

@Component({
  selector: 'app-registro',
  templateUrl: './registro.component.html',
  providers: [],
  styleUrls: ['./registro.component.css']
})

export class RegistroComponent implements OnInit {

  tiposEquipo: TipoEquipo[] = [];
  marcas: Marca[] = [];
  rangos: Rango[] = [];
  equipo: Equipo = new Equipo(0, '', '', 0, 0, 0, 0, 0, 0, '', '', '', 1, '', new Date(), '', new Date());
  searching = false;
  searchFailed = false;
  nombreEmp: string;
  IdResponsable = {};
  closeResult: string;

  constructor(private tipEquiSrv: TipoEquipoService,
    private marcaSrv: MarcaService,
    private rangoSrv: RangoService,
    private empleadoSrv: EmpleadoService,
    private equipoSrv: EquipoService,
    private responsableSrv: ResponsableService,
    private modalService: NgbModal,
    public toastr: ToastsManager, vcr: ViewContainerRef) {
    this.toastr.setRootViewContainerRef(vcr);
  }

  ngOnInit() {
    this.tipEquiSrv.getTipoEquipo().subscribe(tipos => { this.tiposEquipo = tipos; });
    this.marcaSrv.getMarcas().subscribe(marcas => this.marcas = marcas);
    this.rangoSrv.getRangos().subscribe(rangos => { this.rangos = rangos; });
  }

  registro() {
    console.log(this.equipo);
    // this.equipoSrv.addEquipo(this.equipo)
    //   .subscribe(
    //   data => console.log(data),
    //   err => console.log(err),
    //   () => console.log('Request Completa')
    //   );
  }

  search = (text$: Observable<string>) =>
    text$
      .debounceTime(300)
      .distinctUntilChanged()
      .do(() => this.searching = true)
      .switchMap(term =>
        this.empleadoSrv.getEmpleadoLike(term)
          .do(() => this.searchFailed = false)
          .catch(() => {
            this.searchFailed = true;
            return Observable.of([]);
          }))
      .do(() => this.searching = false)

  // formatter = (x: { nombre: string }) => x.nombre;

  inputFormatter(x) {
    return x.empleadoId;
  }

  resultFormatter(x) {
    return x.nombre;
  }

  onBlurMethod() {
    // Consulto la Cedula en Responsables
    this.responsableSrv.getResponsableCed(this.IdResponsable['empleadoId'])
      .subscribe(responsable => {
        console.log(responsable);
        if (responsable == null) {
          const modalRef = this.modalService.open(ConfirmComponent);
          // const modalRef = this.modalService.open(ConfirmComponent);
          // modalRef.componentInstance.name = 'El Responsable no Existe, Desea Crearlo?';
          // modalRef.componentInstance.titulo = 'Alerta!';
          // modalRef.result.then((result) => {
          //   console.log('result');
          //   console.log(result);
          // }, (reason) => {
          //   console.log('reason');
          //   console.log(reason);
          // });
        }
      });

  }

  public onSelectTypeahead(eventItem) {
    this.nombreEmp = eventItem.nombre;
  }
}

非常感谢您的合作，我几个小时都无法解决这个问题，我是棱角分明的新人，我在其他论坛上问过，但他们没有给我答案。

Answer 1

只需添加此行

即可

this.renderer.invokeElementMethod(this.elRef.nativeElement.ownerDocument.activeElement, 'blur');

之前

const modalRef = this.modalService.open(ConfirmComponent);

不要忘记添加到构造函数

constructor(private elRef: ElementRef, private renderer: Renderer) {}

所以它应该是这样的

//***Your code ***
constructor(private tipEquiSrv: TipoEquipoService,
    private marcaSrv: MarcaService,
    private rangoSrv: RangoService,
    private empleadoSrv: EmpleadoService,
    private equipoSrv: EquipoService,
    private responsableSrv: ResponsableService,
    private modalService: NgbModal,
    public toastr: ToastsManager, vcr: ViewContainerRef,
    private elRef: ElementRef,
    private renderer: Renderer
) {
    this.toastr.setRootViewContainerRef(vcr);
  }
//***Your code***
if (responsable == null) {
this.renderer.invokeElementMethod(this.elRef.nativeElement.ownerDocument.activeElement, 'blur');
const modalRef = this.modalService.open(ConfirmComponent);
//***Your code***

模态打开时聚焦输入的问题。我有同样的问题。只有这条没有焦点的线帮助了我。您可以阅读有关此问题的更多here。

打开Modal进入订阅服务

1 个答案: