Angular发起HTTP请求后打开ngx Modal出现类型错误如何解决？

这是TypeScript严格类型检查触发的编译错误：你声明modalr时添加了可选修饰符?，所以它的类型为TemplateRef<any> | undefined，但openModal方法定义的入参要求是必填的TemplateRef<any>类型，不允许传入undefined，因此出现类型不匹配报错。

你可以根据实际场景选择以下任意一种方案：

• 方案1：调用时添加非空断言（确认模板中一定存在#template标记的<ng-template>时使用）
  将弹窗调用代码修改为：

  this.openModal(this.modalr!);
  

  末尾的!是TypeScript的非空断言运算符，用来告知编译器该变量此时一定有值，不会是undefined。
• 方案2：增加存在性判断（安全性最高，避免运行时报错）
  调用前先判断modalr是否存在，存在才执行打开逻辑：

  if(this.modalr) {
    this.openModal(this.modalr);
  }
  

• 方案3：修改变量声明，移除可选修饰符
  如果你确认@ViewChild一定能查询到对应的模板元素，可以将声明中的?改为!，直接声明该变量一定会被初始化：

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

你当前代码还缺少HttpClient的依赖注入，需要在构造函数中添加注入声明，否则运行时调用this.http.post会抛出undefined错误：

constructor(private modalService: BsModalService, private http: HttpClient){
}

内容的提问来源于stack exchange，提问作者the smart life