在 Angular 个 http 请求后打开 ngx Modal

Question

我试图在从 angular 应用程序发出 http 调用后打开 ngx 模态 window。

这里是app.module.ts

的代码

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    ModalModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这里是调用http的组件代码

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Tour } from './Models/Tour/tour.model';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'AnguLearn';
  public fGroup: FormGroup;
  public Tours : Tour[] = [];
  public Empty = false;
  @ViewChild('template', {static: true}) modalr? : TemplateRef<any>;
  modalRef?: BsModalRef;
  constructor(private modalService: BsModalService){
      
  }
  
  public getDatas(){
    
    const httpOptions = {
      headers: new HttpHeaders({
         'Content-Type': 'application/json; charset=utf-8'
      })
   };

  this.http.post<[Tour]>("https://localhost:44387/api/tours", filter_details, httpOptions).subscribe(
      (response)=>{
        this.Tours = response;
        this.Empty = response.length <= 0;
        this.openModal(this.modalr);//I want to open a modal box here
      }, errors=>{ console.log(errors)});
  }

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }
}

没有成功，也没有通过编译。我总是在 this.openModal(this.modalr); 行中收到以下错误：

Argument of type 'TemplateRef | undefined' is not assignable to parameter of type 'TemplateRef'. Type 'undefined' is not assignable to type 'TemplateRef'.

有什么想法吗？

Answer 1

您的输入有误。

@ViewChild('template', {static: true}) modalr? : TemplateRef<any>;

? 表示 modalr 的可选值。如果是这样，您应该以这种打字方式更改您的方法。或者，如果您确定在 TemplateRef 中有价值 - 只需从属性语法中删除 ? 符号，如下所示：

 @ViewChild('template', {static: true}) modalr : TemplateRef<any>;

如果您不确定是否有模板值，请执行此操作：

  openModal(template?: TemplateRef<any>) {
    if (template) {
      this.modalRef = this.modalService.show(template);
    }
  }

在 Angular 个 http 请求后打开 ngx Modal

Open ngx Modal after Angular http Request

javascript

angular

modal-dialog

observable

ngx-bootstrap