当前位置: 首页 > 知识库问答 >
问题:

NGX-bootstrap,组件模态,选择器"模态内容"不匹配任何元素

艾原
2023-03-14

我有Angular 7“ngx引导”:“^3.1.4”和“引导”:“^4.3.1”

这些完全兼容吗?

我试图打开组件在模态这个问题:ngx-bootstrap如何打开一个模态从另一个组件?

但是我得到了这个错误:

错误错误:未捕获(promise中):错误:StaticInjectorError(AppModule)[DialogBoxComponent-

我已经导入ngx在我的模块为:

        import { BrowserModule } from "@angular/platform-browser";
    import { NgModule } from "@angular/core";
    import { HttpClientModule } from "@angular/common/http";

    import { AppComponent } from "./app.component";
    import { AppHeaderComponent } from './app-header/app-header.component';
    import { AppFooterComponent } from './app-footer/app-footer.component';
    import { AppRoutingModule } from './app-routing.module';
    import { PoliciesComponent } from './policies/policies.component';
    import { AddComponent } from './add/add.component';
    import { ReactiveFormsModule } from '@angular/forms';
    import { ModalModule } from 'ngx-bootstrap';
    import { ModalContentComponent } from './modal-content/modal-content.component';


    @NgModule({
      declarations: [AppComponent, AppHeaderComponent, AppFooterComponent, PoliciesComponent, AddComponent, ModalContentComponent],
      imports: [
        ModalModule.forRoot(),
        HttpClientModule,
        BrowserModule,
        AppRoutingModule,
        ReactiveFormsModule

      ],
      providers: [],
      bootstrap: [AppComponent, ModalContentComponent]
    })
    export class AppModule { }



    import { Component } from '@angular/core';
    import { BsModalRef } from 'ngx-bootstrap/modal';

    @Component({
      selector: 'modal-content',
      templateUrl: './modal-content.component.html',
    })

    export class ModalContentComponent {
      title: string;
      closeBtnName: string;
      list: any[] = [];

      constructor(public bsModalRef: BsModalRef) { }

      ngOnInit() {
        this.list.push('PROFIT!!!');
      }
    }

import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
import { PoliciesService } from './policies.service';
import { Policy } from 'src/models/policy';
import { Gender } from 'src/models/gender';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
import { ModalContentComponent } from '../modal-content/modal-content.component';

@Component({
  selector: 'app-policies',
  templateUrl: './policies.component.html',
  styleUrls: ['./policies.component.scss']
})
export class PoliciesComponent implements OnInit {
  gender = Gender;
  policies: Policy[];
  bsModalRef: BsModalRef;

  constructor(private policiesService: PoliciesService, private modalService: BsModalService) { }

  ngOnInit() {
    this.policiesService
      .getAll()
      .subscribe(p => this.policies = p);
  }

  deleteClicked(id: number) {
    this.policiesService
      .delete(id)
      .subscribe(() => this.deleteFrom(this.policies, id));
  }

  private deleteFrom(arr: Policy[], id: number) {
    arr.splice(arr.findIndex((p: Policy) => p.policyNumber === id), 1);
  }

  openModalWithComponent() {
    const initialState = {
      list: [
        'Open a modal with component',
        'Pass your data',
        'Do something else',
        '...'
      ],
      title: 'Modal with component'
    };
    this.bsModalRef = this.modalService.show(ModalContentComponent, { initialState });
    this.bsModalRef.content.closeBtnName = 'Close';
  }
}

共有1个答案

唐睿
2023-03-14

我在添加ModalContentComponent时出错。应将其添加到模块中,如下所示:

providers: [],
  entryComponents: [ModalContentComponent],
  bootstrap: [AppComponent]
})
 类似资料:
  • 问题内容: 我在使用的选择功能时遇到麻烦。我测试了变量是否正确填充。一切似乎都不错,但是select函数根本无法工作。 问题答案: 我自己解决了。选择一个单词之前,textarea需要获得焦点! 这是带有新代码行的搜索功能:

  • 主要内容:用法,实例,选项,方法,实例,事件,实例模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 如果您想要单独引用该插件的功能,那么您需要引用 modal.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 用法 您可以切换模态框(Modal)插件

  • 本文向大家介绍Bootstrap模态对话框中显示动态内容的方法,包括了Bootstrap模态对话框中显示动态内容的方法的使用技巧和注意事项,需要的朋友参考一下 首先引入bootstrap的js和css,在引入对应版本的jquery; 添加按钮,点击弹出模态窗体: 创建模态对话框: 注意:如果发现二级窗体打开一次后再打开失败,请看看href引用的界面中,是否在header中引入了css或js,这里不

  • 问题内容: 最近我正在学习angularjs。我以前使用过引导程序。使用jquery,我可以轻松更改模态组件位置的位置以使其垂直对齐。现在使用angularjs,似乎很难做到这一点。这是ui引导模态的一个庞克链接,有人知道如何使其垂直对齐吗? ui引导程序模态组件 1.index.html 2.example.js 问题答案: 如果我正确理解了您的问题,则只需使用CSS即可实现垂直居中对齐。添加以

  • 我有一个选择元素,里面有多个选项: 对于这里看到的每个选项元素,我都有另一个select元素。基本上,我在一个选择元素中列出了一系列音乐流派,在它下面,是与每一个“主流派”相关的子流派。 我想做的是使子体裁只有在相对体裁被选中时才可见。例如,如果用户选择“Pop”,我想向他们显示包含Pop子类型的相关选择字段。 我的HTML标记实际上是由WordPress插件生成的,不幸的是,我无法编辑它。也就是

  • 问题内容: 我在一个名为的页面中有一个锚点,但在获取Bootstrap模式以显示另一个名为的页面中的数据时遇到了麻烦。 menu.html Lab6.html 我做错什么了吗? 问题答案: 更新资料 您尝试从另一个页面获取模式内容的方式不正确。 根据Bootstrap的文档: 如果提供了远程URL,则将通过jQuery的load方法加载一次内容并将其注入div中。如果您使用的是data- api,