问题标签 [ngx-bootstrap-modal]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
247 浏览

angular - Ngx-bootstrap:模态容器位置内的模态对日期选择器不起作用

当我们将Ngx-Bootstrap模态放置在另一个模态中时,Datepicker 容器在随机位置打开。注意:内部 dailog 具有 datepicker 元素。

如需参考,请查看此演示

更新:关闭前一个模态将解决问题,但我们需要在不关闭前一个模态的情况下保持状态。并且需要将 datepicker 容器附加到特定元素

0 投票
0 回答
593 浏览

angular - 如何解析对象文字只能指定已知属性,并且“部分”类型中不存在“xxxx”'. in ModalOptions

Background

Background

Basically I had created a mixin for opening and closing my modals in ngx-bootstrap/modal

Below is the code for the modal

modalMixin.ts

Simply what I have achieved is that any class that extends my modalMixin() function has all required properties and function to open and close a modal. If I call this.openModal({id: 123, component: SomeCompenent}) then SomeComponent will be opened with @Input = 123 123 being the value passed in the openModal function.

Challenge

The above functionality is working only that I receive below error

I do understand what the error is saying. As stated in this question Why am I getting an error "Object literal may only specify known properties"?, I understand that properties not included in the type will throw an error

but how do I pass { id: number } as a Partial<Object>? Simply what properties are included in Partial<Object>

WorkAround

Currently I have found two ways to make the error go away

And simply

The above approaches seem to solve the problem, what I need now is how would I create an Object of the form Partial<Object>?


You can achieve this in various ways. The simplest one is creating 3 Models representing Student, Teacher, Authorities with One to One Relationship with Django User Model. If you're experienced enough you can use the AbstractUser interface(abstract class) and extend it to create 3 models for three different types of users. Examples:

AbstractUser Documentation

0 投票
0 回答
48 浏览

angular - 如何在 ngx-bootstrap 模式中绑定回车键?

我想使用ngx-bootstrap 模态来构建一个简单的确认模态。

模态询问用户诸如“你确定吗?”之类的问题。以“是”和“否”作为选项。到目前为止效果很好。

这是我的组件:

https://github.com/azerothcore/Keira3/tree/master/src/app/shared/modules/modal-confirm

你也可以按 ESC 说“不”,但是我不知道如何让“Enter”自动反应为“是”。我怎样才能实现它?

换句话说,我怎样才能将 绑定(keydown.enter)到某个动作?

我注意到打开模式时聚焦的元素不在我的控制之下。这是我的主要问题。

0 投票
0 回答
41 浏览

ngx-bootstrap - 更新到 ngx-bootrap 6.1.0 后,initialState 不再起作用

我们使用了 ModalOptions 中的 initialState,如下所示:

companyIdInput/this.companyId 是一个字符串。

现在,这不再起作用了。我们有以下错误:

键入'{ companyIdInput:字符串;}' 不可分配给类型 'Partial'。

我们如何传递价值观?

非常感谢。

0 投票
2 回答
195 浏览

angular - 如何在 Angular 中为不同的用户创建不同的模态?

我正在尝试创建一个包含多个用户数据的应用程序。我必须为每个用户创建 6 个模式,他们可以从中访问他们的数据。假设用户 1 有 6 个名为 - ABCDEF 的模态,那么

单击 A 时,应打开登录模式。

点击B,注册模式应该打开

并且所有这些模式对于所有用户都是不同的。

我尝试为用户创建不同的方法,但这不起作用。因为我将不得不为所有用户创建 6 种方法,并且与模式相同。因此,对于 1 个用户,我将必须创建 6 个模态,然后再为第 2 个用户创建另外 6 个模态,依此类推。

有没有更好的方法呢?

我创建了一个StackBlitz来展示我所做的

0 投票
0 回答
22 浏览

bootstrap-4 - 订阅 ngx-boostrap 模式

早上好,

有人可以帮我解决我的模态问题吗?

在此示例中,我有 2 个模态,在其中打开第一个,然后打开第二个...我配置了订阅,因此当我关闭模态时,它会出现在 console.log('modal1') 或 console.log('modal2')但是当关闭 modal2 时,modal1 和 modal2 控制台都会出现。

我需要 modal1 控制台仅在第一个 modal1 关闭时触发

该示例位于此链接中。用 ESC 测试关闭 modal2 并检查 console.log。

https://stackblitz.com/edit/angular-ngx-bootstrap-modal-example-d9qwji?file=app%2Fcta-modal%2Fcta-modal.component.ts

有人知道吗?

0 投票
0 回答
45 浏览

angular - 在ngx-bootstrap中关闭嵌套模式后如何保存然后重新打开隐藏模式?

我想做下一件事。

情况是我有两个嵌套的模态,并且打开第二个(嵌套)模态我隐藏了第一个。

然后,当关闭第二个模式时,我想先重新打开。在 show 方法中打开使用组件的模式,而不是使用模板。现在我通过在 hide 之后再次调用 show 方法来做到这一点,但这很复杂,因为我也必须发送一些数据,并且可能有两个以上的嵌套模式。我需要一些方法来保存以前的模态并重新打开它们。

我将尝试展示一些示例:

0 投票
0 回答
67 浏览

angular - 如何使用角度测试 ngx-bootstrap 模态


在我使用@Output() 发出后,我尝试测试我的 toHaveBeenCalled 函数"@angular/core": "~12.2.0""ngx-bootstrap": "^7.1.0"

这是我的代码
主要组件:

模态组件:

我想期待mySimpleFunction();被叫
,但我得到了TypeError: Cannot read properties of undefined (reading 'content')

这是我的单元测试: