问题标签 [ng-bootstrap-modal]

我是 Angular 的新手，我对带有ng-Bootstrap 的Modals有一些疑问。我已经能够打开相同组件中的模态并且它们工作正常，一个例子是这个：

关联：

点击事件：

模态：

它可以工作，但是，我想将此模态移动到子组件，因为我有 4 个模态并且代码看起来有些杂乱无章，但是如果我创建一个新的子组件，请将模态代码移动到子组件，然后，我像这样将它添加到父组件中：

什么都没有发生，因为点击没有打开任何东西。有没有人有类似的经历？你知道我应该在点击事件中改变什么吗？

我什至阅读了文档，但找不到与我的文档相关的示例：

https://ng-bootstrap.github.io/#/components/modal/examples

感谢您的任何想法。

我正在使用 angular 8，带有引导程序“bootstrap”：“^4.3.1”，

我想将我的应用程序迁移到 ng-bootstrap，以避免使用 jquery

请有任何想法

我花了几天时间尝试修改 src attr，但没有成功。任何帮助将不胜感激。这是 HTML

按钮中的 ngFor 工作正常。Angular 也可以在模态中工作，因为它在 DOM 中创建了多个模态。“澄清”按钮中的 open() 函数也有效，但嵌入中的 src 属性无效。我尝试过使用常规引导程序、ng-bootstrap 和 ngx-bootstrap，结果都相同。有任何想法吗？

谢谢你。

我正在尝试将 NgbModal 的宽度调整为 80vw 但未显示。我错过了什么吗？我什至浏览了文档，但没有显示如何添加自定义大小。

下面是我的一段代码：

我创建了一个返回所有数字输入元素以在 HTML 中生成的模式，但是当我在其中插入一个数字时，如果我在 ngFor 中写入数组（例如：{{ ng_model_m[i] }}），它将返回值，但如果我编写 ngModel（例如：sm.m_prova），它将返回 NaN。

项目：https ://stackblitz.com/edit/angular-jbzmnq?file=src%2Fapp%2Fschemamasse-comp.component.ts

更新：当我生成 ngModel 时，我还生成名称属性，并且我在“检查元素”中看到元素输入内没有名称属性，但是有 ng-reflect-name 并且如果在控制台上按事件打印.target.name，它什么也不打印。

我正在使用 ng Bootstrap Datepicker 在 Angular 8 中工作

我在年份 dorpdown中的DatePicker 框中的年份范围有限

我正在分享我的代码

我也在分享图片

我正在尝试制作一张桌子，它将显示城市中的场地。我正在使用 *ngFor 循环来显示场地（表格行）。单击表格行后，应出现包含更多信息的模式窗口。我正在使用 ng-bootstrap 并从 json 加载有关场地的信息。

我的问题是 - 为每个场地（表格行）创建模式窗口的最佳方式（以及如何实施）是什么。我试图将 modalWindow 放在 ng-container 中并为其分配唯一 ID，但没有成功，因为我只能将 TemplateRef 或 Component 传递给 ng-bootstrap 函数 .open()。

所以除了上面的解决方案，我知道如何做到这一点。我认为最好的方法是创建模态窗口的模板（以避免创建几乎相同的模态窗口 100 倍），然后动态地将值（名称、描述等）传递给它，即用户点击。但我真的不知道如何实现这一点。

现在我有这段代码，它正在生成表格行：

以及我想要显示的这个示例模式窗口。请注意，模态窗口内的值应该会有所不同，具体取决于单击的地点。示例模式窗口的代码：

您能否帮助我，如何以正确的方式为每个场地制作模态窗口？谢谢！:)

我编写了一个 Angular 9 模态对话框组件，我正在从 bootstrap 迁移到 ng-bootstrap 6.1。这是模板：

这是代码：

当show()调用并调用该方法时this.modalService.open(...)，我得到以下运行时异常：

该组件在另一个组件中实例化，如下所示：

并在代码隐藏中引用，如下所示：

有想法该怎么解决这个吗？

为了显示错误消息，我想在 Promise 中打开一个从另一个模式解析的模式。场景是这样的：

1. 当用户单击按钮时，会弹出一个模式并显示一个表单。
2. 用户输入必要的信息后，模态框关闭并检查用户输入的信息。
3. 如果输入正常，则视图更新；否则打开另一个模态（错误模态）。用户应该能够通过按“enter”键来关闭错误模式。

打开错误模式通常集中在关闭按钮上。但是，当我在另一个模态的承诺中打开模态时，自动对焦不起作用。这会导致奇怪的行为，即当用户按下“enter”键时，应用程序再次执行 1 并再次打开输入模式 - 而不关闭错误模式。

这是处理模态的代码：

我们尝试了几种方法来解决此问题：

1. 使用 NgZone：我们不是简单地打开模式，而是将打开封装在 ngZone.run() 中。这不会改变自动对焦行为。this.ngZone.run(()=>this.ngbModal.open(ErrorModalComponent))不关注错误模式的按钮。
2. 使用 ChangeDetectorRef：错误模式组件的 ngOnChanges() 方法未触发。
3. 在错误模式的按钮上使用 ngbAutofocus 指令：这不会将焦点设置到按钮。
4. 使用 setTimeout()：我们将模态的打开封装在一个 setTimeout() 方法中。setTimeout(()=>this.ngbModal.open(ErrorModalComponent));现在自动对焦功能。但是，这感觉不对。

我的问题：处理自动对焦问题的正确和“ng-bootstrap”方式是什么？

从昨天晚上开始，我一直在思考为什么这段代码不起作用

当我尝试调用我的模态时，我总是遇到这个错误。

我的模式代码

我的模态组件代码

感谢任何帮助我已经检查了文档和每个可能的链接。