【问题标题】:ngx-bootstrap ERROR TypeError: _co.openModal is not a functionngx-bootstrap 错误类型错误:_co.openModal 不是函数
【发布时间】:2019-10-12 06:08:21
【问题描述】:

我是 ngx-bootstrap 的新手,我尝试从这个网站制作模态:https://valor-software.com/ngx-bootstrap/#/modals

我收到了这个错误:

ERROR TypeError: _co.openModal is not a function

这里有一些sn-ps

//app.component.ts file

import { Component } from '@angular/core';
import { TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';


 @Component({
  selector: 'app-root',
  styleUrls:['app.component.css'],
  templateUrl:'app.component.html',
  //template:`<h1>Hello world</h1>`
})

export class AppComponent 
{
  title = 'ini tengah';
}

export class DemoModalServiceStaticComponent {
  public modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}
 
  public openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }
}
<!--the HTML file-->

<!--call modal-->
<li><a href="#" (click)="openModal(template)">BUTTON</a></li>
<!--end-->

<!--Modal-->
<template #template>
    <div class="modal-header">
      <h4 class="modal-title pull-left">Modal</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      This is a modal.
    </div>
  </template>
<!--enf of modal-->

我关注了该网站并收到错误消息。谁能帮我解决这个错误?

如果需要更多的 sn-ps,请告诉我。

【问题讨论】:

  • 你能在这个问题中提到你的模板名称和打字稿名称吗?问题是如果您在 app.component.html 中编写模型模板,则组件名称不匹配,您只能在 AppComponent 中编写 typescript 模型弹出。
  • 我使用的是默认名称,app.component.html 和 app.component.ts

标签: html angular function ngx-bootstrap


【解决方案1】:

试试这样:

在Appcomponent里面写openModal方法

export class AppComponent {
  title = 'ini tengah';
  public modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

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

【讨论】:

  • 没想到它必须在 AppComponent 中,再次感谢 Chandru 先生
猜你喜欢
  • 1970-01-01
  • 2018-04-28
  • 2019-02-14
  • 2021-10-02
  • 2021-10-30
  • 2018-11-22
  • 2017-10-12
  • 2020-06-05
  • 2023-03-15
相关资源
最近更新 更多