ng-bootstrap-modal 相关问题

我有一个基于 Django 的网站，使用 bootstrap 5。我有一个数据表和一个包含大量文本的注释列。我正在尝试使用 Bootstrap Modal 弹出功能来显示要保留的注释...

我有一个 Bootstrap Modal 来选择事件。如果用户单击 X 按钮或模式之外，我想将它们发送到默认事件。我怎样才能捕获这些事件？这是我的 HTML ...

有这个包https://github.com/wire-elements/modal。我已按照配置步骤来实现模式，但是我使用了不同的 CSS 框架。我的问题是哪里说：

我在我的项目中使用 ng-bootstrap [ngbScrollSpy] 指令，如文档中所述，但它不起作用 - 滚动时活动项目不会改变。我的代码如下：我在我的项目中使用 ng-bootstrap [ngbScrollSpy] 指令，如文档中所述，但它不起作用 - 滚动时活动项目不会改变。我的代码如下： <div> <div class="sticky-top"> <ul class="nav menu-sidebar"> <li > <a [ngbScrollSpyItem]="[spy, 'about']">About</a> </li> <li > <a [ngbScrollSpyItem]="spy" fragment="schedule">Schedule</a> </li> <li > <a [ngbScrollSpyItem]="spy" fragment="hotel">Information about the hotel</a> </li> </ul> </div> <div ngbScrollSpy #spy="ngbScrollSpy" > <section ngbScrollSpyFragment="about"> <h3>About</h3> <p>{{some long long text and content}}</p> </section> <section ngbScrollSpyFragment="schedule"> <h3>Schedule</h3> <p>{{some long long text and content}}</p> </section> <section ngbScrollSpyFragment="hotel"> <h3>Information about the hotel</h3> <p>{{some long long text and content}}</p> </section> </div> </div> 我在这个 stackoverflow 问题中看到，我的问题是我没有向我的 div 提供 height，这是事实。但我的滚动间谍部分遍布整个页面，而不是一个小 div，（导航本身是 sticky-top）。所以我不能给它高度。我知道有替代方法 - 刷新窗口滚动上的滚动间谍，但我没有找到可以帮助我的正确代码。你能解决我的问题吗？为我提供刷新滚动间谍的代码/给我有关高度的提示/帮助我找到另一个相应的元素。非常感谢！附上 stackblitz 演示的链接注意：我使用来自 @ng-bootstrap/ng-bootstrap 的 NgbScrollSpy （我想它是非常相似的库）我做什么：我将所有内容（包括导航）包装在中 <div class="wrapper" ngbScrollSpy #spy="ngbScrollSpy" rootMargin="2px" [threshold]="1.0" > <div class="sticky-top pt-4 pb-4 bg-white"> ..here the navigation... </div> ..here the sections... <section ngbScrollSpyFragment="about"> </section> //the last I use margin-bottom:2rem; <section ngbScrollSpyFragment="hotel" style="margin-bottom:10rem" </section> </div> 见“门槛”。这表明“更改”活动片段应该可见的百分比（1 是 100%）包装类 .wrapper{ height:100%; position: absolute; top:0; } 我使用强制链接的类别 //remove all the class for the link a{ color:black; text-decoration:none; padding:8px 16px; } a.custom-active{ color:white; background-color:royalblue } 以及我使用的每个链接 <a [class.custom-active]="spy.active=='about'">About</a> 嗯，问题是如何“滚动到”。 “链接”应该作为链接使用。第一个是指示“路由器”应该考虑“碎片” 如果我们的组件是独立组件，我们需要使用提供者，provideRouter bootstrapApplication(App, { providers: [ provideRouter([], withInMemoryScrolling({anchorScrolling:'enabled'})), ] }) 然后，我们需要考虑到我们的页面确实没有滚动，div“包装器”是谁拥有滚动。因此，我们订阅 router.events，当事件有“锚点”时，我们滚动“包装器”div constructor(router: Router) { router.events.pipe(filter((e:any) => e.anchor)).subscribe((e: any) => { (document.getElementById('wrapper') as any).scrollTop+= (document.getElementById(e.anchor)?.getBoundingClientRect().top||0) -72; //<--this is the offset }); } 在这个stactblitz中你有一个有效的例子

Angular 17 中的 NG 块 UI

我尝试在 Angular 17 中使用 NG Block UI 并收到此错误 ng block ui error in Angular 17 知道这个模块在 Angular 17 中如何工作吗？提前致谢我使用 npm i ng-

NG8001：“app-welcome”不是已知元素：

我的 Angular 应用程序遇到问题，收到错误 8001。我不知道如何处理它。谁能帮我这个？谢谢你！应用程序组件.html {{标题}}&l... 我的 Angular 应用程序遇到问题，收到错误 8001。我不知道如何处理它。谁能帮我这个？谢谢！ app.component.html <h1>{{ title }}</h1> <p>Congratulations! Your app is running. 🎉</p> <app-welcome></app-welcome> app.component.ts import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'XYZCARS'; } welcome.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-welcome', templateUrl: './welcome.component.html', styleUrl: './welcome.component.css' }) export class WelcomeComponent { car = 'toyota'; } 我的项目最初没有 app.module.ts 文件。我自己添加了它并根据网上找到的一些信息进行了配置，但问题仍然存在并且仍未解决。谁能帮我解决这个问题吗？ app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { WelcomeComponent } from './welcome/welcome.component'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, WelcomeComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 如果您正在 Angular 17 中创建项目->使用这些命令 ng app --no-standalone 然后你就得到了 app.module.ts 文件。

无需封闭标签的角度内容投影

有没有一种方法可以实现不包含标签的内容投影？这是我的组件：有没有一种方法可以实现不包含标签的内容投影？这是我的组件： <div class="flex flex-column container"> <div class="flex flex-column header"> <ng-content select="[header]"></ng-content> </div> <div class="flex flex-column body"> <ng-content></ng-content> </div> <div class="flex flex-column footer"> <ng-content select="[footer]"></ng-content> </div> </div> 请注意，有两个可能的插槽 header 和 footer。这些组件应该这样使用： <div header>Header</div> Body <div footer>Footer</div> 如果没有这个div我该如何使用这个组件？我的意思是，我只想添加内容，因为如果我添加 div，它可能会破坏布局。您可以尝试在 ngProjectAs 标签上使用 ng-container 属性： <ng-container ngProjectAs="[header]">Header</ng-container> Body <ng-container ngProjectAs="[footer]">Footer</ng-container> 更多相关内容请参见 Angular 文档

Python 包安装问题：ModuleNotFoundError

我正在尝试使用 modal-python 包。使用 Google Colab 笔记本时，在安装 pip install modal-python 软件包后，我可以轻松地按预期使用该软件包。例如：从 modAL.models 导入

为什么 ng-container 不响应样式？

我想对 ng-container 进行样式设置，例如在悬停时添加边框或在悬停时在该标签内显示按钮，但这是不可能的。 ng-container 似乎对样式不敏感。渲染于...

脚本无法在我的引导模式中工作

希望这不是一个愚蠢的问题，但我已经没有主意了...... 所以我有这个模式： 1.scala.html 希望这不是一个愚蠢的问题，但我已经没有主意了...... 所以我有这个模式： 1.scala.html <div class="feat" id="cor" data-toggle="tooltip" data-placement="bottom" title="add conference role"><div data-toggle="modal" data-target="#conf-role-menu-modal">Conference Role</div></div> <div class="modal fade" id="conf-role-menu-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body-conf-role-menu"> <script type="text/javascript"> $(function(){ $(".modal-body-conf-role-menu").load("@routes.Application.areaConferenceRole(id,idenv)"); }); </script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 使用模态主体中的脚本，我尝试加载此页面： 2.scala.html @(id:String, idenv:String) @Main("Add area") { <form action="@routes.Application.areaPostConferenceRole(id,idenv)" method="POST"> First Name: <input type="text" name="first_name" id="first" class="form-control"> Last Name : <input name="last_name" class="form-control"> <script type="text/javascript"> $( document ).ready(function() { // Handler for .ready() called. $( "#first" ).focus(function() { alert( "Handler for .focus() called." ); }); }); </script> </form> } 页面加载正常。我在我的模态中看到它...... 问题是我的页面 2.scala.html 中的脚本无法运行。我不明白为什么......如果我从我尝试在模态中加载的页面之外尝试它们，它们就会起作用...... $( document ).ready(function(){}); 永远不会在模态中到达，因为加载页面时已经触发了此事件（模态在之后加载...）尝试直接插入脚本，如下所示： <script type="text/javascript"> $( "#first" ).focus(function() { alert( "Handler for .focus() called." ); }); </script> 当引导模式弹出时，shown.bs.modal事件将被触发。这是例子。 $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) Full documentation. https://getbootstrap.com/docs/4.0/components/modal/ 试试这个我已经准备好这个功能了 $('#myModal').on('shown.bs.modal', function () { // Your script here }); $(document).on('shown.bs.modal', '#myModal', function () { // Your script here });

如何在 Ng Prime 菜单栏中设置菜单项的样式？

我刚刚开始使用 ng prime，我使用了 p 菜单栏这是组件文件：这个.items = [ { 标签：“第一项...

nz-select 下拉列表不会在 nz-modal 中自行连接

在内容可滚动的 nz-modal 中使用 nz-select 时，您会看到页面滚动后下拉列表未连接到自身。期待显示错误显示这是重现该问题的示例...

Expo Development 客户端 Ios 构建问题？

不变违规：requireNativeComponent：在 UIManager 中找不到“RNDateTimePicker”。此错误显示在 "react-native-modal-datetime-picker": "^17.0.0", ...

通过 ng-bind-html 使用插入的 HTML 中的函数

我从数据库中获取了一个 HTML 字符串，我想通过 ng-bind-html 将其插入到我的 AngularJs 应用程序中。我是这样做的： HTML： <... 我从数据库中获取了一个 HTML 字符串，我想通过 ng-bind-html 将其插入到我的 AngularJs 应用程序中。我是这样做的： HTML： <div ng-bind-html="myBindHtml"></div> JavaScript： $scope.myBindHtml = $sce.trustAsHtml(htmlStringToInsert); 我的 HTML（我想插入）看起来像这样： <button ng-click="testClickEvent()">TestButton</button> 插件工作正常。现在我编写了一个按钮应该调用的函数（testClickEvent）。这只是将一个字符串输出到控制台。但这部分不起作用。我猜想我插入的 HTML 与该函数没有绑定。有什么办法可以调用我的函数吗？ Angular 代码仅当您在 Angular 上下文中运行时才会执行。当您使用 ng-bind-html 时，它会在 Angular 上下文之外生成，因此像 ng-click 这样的 Angular 事件不起作用，您需要依赖像 onclick 这样的纯 JS 事件，因此请避免使用这些场景，而直接在 Angular 上进行编码，因为解决方案的复杂性！当需要角度事件并且我们需要直接在前端编码而不是从数据库或其他方法输入时，我们可以避免ng-bind-html var app = angular.module('myApp', []); app.controller('myCtrl', function ($sce, $scope) { $scope.items = []; for (var i = 1; i <= 2; i++) { $scope.items.push({ description: $sce.trustAsHtml('<h2 onclick="console.log(\'hello\')">with onclick item ' + i + '</h2>') }); }; $scope.items2 = []; for (var i = 1; i <= 2; i++) { $scope.items.push({ description: $sce.trustAsHtml('<h2 ng-click="console.log(\'hello\')"> with ng-click item ' + i + '</h2>') }); }; }); <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js" integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <div ng-app="myApp"> <div ng-controller="myCtrl"> <div> <div ng-repeat="item in items" ng-bind-html="item.description"></div> </div> <hr /> <div> <div ng-repeat="item in items2" ng-bind-html="item.description"></div> </div> </div> </div>

Bootstrap 5.2 下拉菜单在 Laravel 中不起作用

我已经从 Bootstrap 网站安装了预配置的导航栏之一。是Bootstrap 5.2的最新版本；但是，下拉菜单不起作用。我没有碰代码；这只是一个定义...

prime ng p-table 页脚将超过 tr 的

我正在使用 prime-ng 表，我尝试在表底部放置一个按钮我希望这个按钮始终靠近表格底部但页脚超出了最后一个我在这里...

Angular“ng 生成组件”复制组件

由于某种原因，自从从 Angular 13 升级到 Angular 15 后，当我输入： ng g c 某些组件 Angular 复制组件，创建重复文件。这种情况 100% 都会发生。第二次...

在 Rails 7 应用程序中使用 bootstrap javascript

我有一个正在运行的 Rails 7 应用程序，它使用 esbuild 作为 JS 捆绑器并导入了 bootstrap。我正在尝试弄清楚如何访问主“外部”的任何 Bootstrap Javascript 功能

使用 :host ::ng-deep 设置 CSS 角色到角度组件 CSS 不起作用？

尝试使用以下方法设置角度组件的 CSS prop :host ::ng-deep .p-dropdown-panel { 变换原点：中心底部！重要；顶部：-119px！重要；左：0！重要； } ...

如何在 Rails 7 esbuild 应用程序中显示 Bootstrap 5.3 弹出窗口？

当我使用 Bootstrap 创建全新的 Rails 7 应用程序时，Modals 可以开箱即用，但 Popover 则不然。我如何让他们工作？ Rails 7.1.2、esbuild、Bootstrap 5.3.2： Rails 新 -- 数据库 sqlite3 --

：主机 ::ng-deep 未将样式应用于材质复选框

我正在尝试为材质多选做一个简单的复选框背景颜色更改。我尝试过两者都做 .mat-pseudo-checkbox-checked { 背景颜色：#a9a9a9 ！重要； } 和 :主持人::ng-de...

应用程序定制器和多个Web部件中的jquery和bootstrap

是个人选择使用bootstrap进行定制。因此，我计划在应用程序定制器和多个 Web 部件中使用 jQuery 和 Bootstrap。对此最好的方法是什么？我正在尝试...

角19- bootstrap旋转木制不会自动启动，但仅在用户与IT互动之后

＆...

运行 ionicserve 我收到此错误：“[错误] ng 意外关闭（退出代码 127）。”

我正在尝试在我的 Mac 上运行 ionic 应用程序。当我运行 npm install 来安装依赖项时，一切正常，没有任何问题。但是当我运行 ionicserve 或 ionics 时，我收到此错误 [ng] 沃...

将嵌套元素放入 ng-content

我尝试用一个获得所有。一个直接位于父元素的根 DOM 中，另一个位于内部帕...

我如何在Bootstrap 5中实现嵌套下拉菜单，以确保子菜单打开并正确关闭？

链接点击时的反应模式调用

使用react-modal，我需要通过锚标记或react-router-dom链接单击超链接时显示模式。示例：单击注册超链接，注册表模式应打开。

PHP 与 Bootstrap 轮播

我正在尝试学习 PHP 并将其与我的网站的 Bootstrap 库一起使用。我希望使用引导程序轮播，如此处所示我想要实现的是带有标题的轮播和

带有 --css bootstrap 的 Rails 7 新应用程序 - Turbo 按钮不起作用

使用 Rails new myapp --css bootstrap 创建新应用程序 Rails 7 时，我的涡轮按钮将不起作用： =button_to“退出”，edit_post_path，方法：：删除，形式：{数据：{turbo_confirm：“...

React-Bootstrap-Typeahead：清除菜单选择

在我的 React-Bootstrap-Typeahead 中，我需要设置一个状态变量并立即清除输入以允许新的搜索。现在发生的事情是：提出建议清单当我选择菜单时...

为什么我们不能使用CSS改变Bootstrap 4中徽章类的颜色？

Bootstrap v4.3.1 中徽章的类是。徽章 { 显示：内联块；填充：0.25em 0.4em；字体大小：75%；字体粗细：700；行高：1；文本对齐：居中；白色-s...

禁用按钮时的角度显示工具提示

<button [disabled]="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)" class="lmn-btn lmn-btn-primary" aria-label="Update" (click)="updateSelectedScopes()" [mtTooltip]="disabledContent" > Update </button> <ng-container *ngIf="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)"> <ng-template #disabledContent>No New Scopes Values Selected</ng-template> </ng-container> 如果在该条件下禁用按钮，如何在悬停时显示工具提示文本，并且当我将鼠标悬停在其上时，我会看到红色关闭图标。这是我尝试过的，但没有成功将此添加到覆盖材质样式的文件中： // this workaround allows for the tooltips to appear on disabled buttons (since mouse events aren't fired for them) button:disabled.mat-mdc-tooltip-trigger { pointer-events: auto !important; // remove the ripple effect on hover > span:first-child { display: none; } } 悬停时它将显示没有波纹背景的工具提示。

从 Material UI Modal 中删除边框

我正在尝试使用 React Material UI 模态，但当它聚焦时，我总是在模态周围看到黑色边框。当它失焦时我已经删除了边框，但是如果模态聚焦......

Bootstrap 模式仅显示 MongoDB 集合中的第一条记录

我正在使用 NodeJS、Handlebars 和 Bootstrap 构建一个简单的 Web 应用程序。它应该循环遍历模拟产品的 MongoDB 集合并显示其字段。我正在“产品...

AngularJS：什么是 $templateCache？

在分析大型 AngularJS 应用程序时，我开始跟踪 $templateCache。 https://docs.angularjs.org/api/ng/service/$templateCache 这个物体是什么？它是否按原样存储部分内容

获取关系数据的有效方法

我有一个Modal ABC和一个名为GROUP的字段，它是外键，并且这个模型Abc也在另一个模型XYZ中用作外键。我的要求是当我用fil查看XYZ列表时...

Bootstrap 5使用js切换折叠不起作用

出于某种原因，我想在没有ID的情况下使用折叠。我在 stackoverflow 上找到了一个旧答案，它似乎在 Bootstrap 5 中不起作用。错误：未捕获类型错误：c.nextElementSibling.collapse i...

React Native：模态问题 - 按下按钮时模态未关闭

我目前在 React Native 项目中遇到与 Modal 组件相关的问题。尽管设置了一个按钮来关闭模式，但它并没有按预期工作。这是...的简化版本...

由于配置映射无效而导致部署失败

我正在尝试安装 nginx 部署并通过 configmap 存储所有 nginx 配置。所有 nginx conf 文件都位于一个名为“ng...

如何让新的 Angular 17 项目运行？

全新安装 Nodejs (20.10.0) 和 Angular (17.0.8)。新项目（“ng new Default”），没有文件更改。 “ngserve”没有错误，但浏览器控制台显示： main.ts:5 错误

Angular 项目不适用于@babylonjs/viewer

我在全球安装了@Angular/Cli@11.0.0。我使用命令行“ng new BabylonTest --routing false --style css --skip-git --skip-tests”创建了一个 Angular 项目。 CD 到文件夹“Babyl...

如何以数组形式提交，只有id。使用 Angular 7 和 ng-multiselect-dropdown

我提交此表格：让 newRole = this.addForm.value console.log(this.addForm) 形式如图所示：当我把 console.log(this.addForm.value) 显示为我只想提交

-vue-如何从父级中打开位于子组件中的模态？

父级如何更改子组件内设置的Open -Modal值？我们希望父母能够打开模式。 parent.vue 从“ ch ...</desc>进口孩子 <question vote="0"> <p>父级如何更改子组件内设置的Open -Modal值？我们希望父母能够打开模式。 </p> -parent.vue<p> </p><code><script setup> import Child from "Child.vue"; </script> <template> <Child/> </template> </code><pre> Child.Vue</pre> <p><code><script setup> import { ref } from "vue"; const openModal = ref(false); </script> <template> stuff </template> </code></p> <pre> </pre> </question>在儿童组件中，您可以使用<answer tick="false" vote="0"><code>defineExpose</code><p>使父级访问Open -Modal功能。 <pre></pre></p> <p> </p><code>const { createApp, ref, defineExpose } = Vue; // Child const ChildComponent = { template: ` <div v-if="openModal"> <div> <p>Modal is open!</p> <button @click="closeModal">Close</button> </div> </div> `, setup() { const openModal = ref(false); const closeModal = () => { openModal.value = false; }; defineExpose({ openModal }); return { openModal, closeModal }; } }; // Parent const App = { components: { ChildComponent }, setup() { const childRef = ref(null); const openChildModal = () => { if (childRef.value) { childRef.value.openModal = true; } }; return { childRef, openChildModal }; } }; createApp(App).mount("#app");</code><div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="false" data-babel-preset-react="false"> <div><code><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="app"> <button @click="openChildModal">Open Modal</button> <child-component ref="childRef"></child-component> </div></code><pre> </pre> <pre> </pre></div> </div> <p></p>

Bootstrap 5.3.3 _type.scs 在使用 Gulp 编译时出现警告

我在我的项目中使用 Bootstrap 5.3.3 并使用 gulp.js 进行编译每次保存更改时我都会看到警告。在终端上看到以下消息。弃用警告：Sass 对出现的声明的行为

Bootstrap 无法与 Rails 正确配合使用

大家好我使用这个入门模板启动一个新的 Rails 应用程序，当我从 bootstrap 添加一个简单的导航栏时。它看起来像这样主要问题是JS不起作用，下拉菜单我...

如何在没有ID的情况下初始化和操作Bootstrap Collapse？

.NET 8 Blazor 服务器 Web 应用程序：使用不同的样式库

我希望Web应用程序中有两个不同的页面使用不同的样式库，例如一个使用Bootstrap 3，另一个使用Bootstrap 5 在 .NET 7 中，_host 有两种不同的实现。

Bootstrap CSS - 将页面从中心向下拆分。用图像填充左侧，用文本填充右侧

我对 bootstrap 5 相当熟悉，但我正在开发一个项目，我试图找出将页面从中心拆分的最佳方法，但中间还有一个容器，允许.. .

如何用html和bootstrap保证屏幕宽度内自动换行

我正在 Flask、Mongodb、HTML 和 Bootstrap 上制作一个 Web 应用程序。我的问题是表格列中的单词会从屏幕上消失，我需要滚动浏览器窗口才能阅读它们。可以请你...

Angular 12：Firebase 模块未正确提供（？）

第一次使用Firebase，所以我不知道发生了什么。我没有修改使用 ng add @angular/fire 获得的配置，所以我的 AppModule 中的内容是： @NgModule({ 声明：[

ng-bootstrap-modal 相关问题

最新问题