Modal Into Subscribe Service

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

あなた

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

だからそれがこの

//***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*** 

のようなものでなければなりません

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

をコンストラクタに追加を忘れないでください前にちょうど

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

この行を追加します。

モーダルオープン時の入力フォーカスに問題があります。私も同じ問題がありました。焦点が合っていないこの行だけが私を助けました。 この問題について詳しくはhereを読むことができます。