问题标签 [ng-modal]

我正在打开一个 NgbModal，传递一个 TemplateRef 来创建对话框主体，并通过我传递给 open() 方法的 NgbModalOptions 对象的 windowClass 属性传入一个自定义类。我在组件中的引用 styleUrl 中定义类，并通过组件中的可注入服务为模式提供服务。模态加载正常，当我检查 DOM 时可以看到类名，但该类似乎与模态无关。我想用它来自定义模态的大小（css被定义为影响设置大小的子div），但我也玩过我可以在Chrome开发工具的Styles选项卡中看到的属性，但看不到它影响任何东西。当我在 Firefox 开发工具中检查时，我可以找到 CSS 作为内联样式表，并且它引用了 Angular 分配的 ngContent 标识符，所以我假设它不会影响整个文档，也不会影响 ng-bootstrap 添加的那些构成模式包装器的部分。有没有人能够成功地完成这项工作？我已经黔驴技穷了。如果我能获得模态标题潜水的 ElementRef，我什至会很高兴，但由于我使用的是模板（在初始化时未完全加载到 DOM 中），所以我无法做到。我的要求之一是我们通过 Angular 进行所有 DOM 操作以保持项目中的平台独立性......所以没有 jQuery。有什么想法吗？并提前感谢！有没有人能够成功地完成这项工作？我已经黔驴技穷了。如果我能获得模态标题潜水的 ElementRef，我什至会很高兴，但由于我使用的是模板（在初始化时未完全加载到 DOM 中），所以我无法做到。我的要求之一是我们通过 Angular 进行所有 DOM 操作以保持项目中的平台独立性......所以没有 jQuery。有什么想法吗？并提前感谢！有没有人能够成功地完成这项工作？我已经黔驴技穷了。如果我能获得模态标题潜水的 ElementRef，我什至会很高兴，但由于我使用的是模板（在初始化时未完全加载到 DOM 中），所以我无法做到。我的要求之一是我们通过 Angular 进行所有 DOM 操作以保持项目中的平台独立性......所以没有 jQuery。有什么想法吗？并提前感谢！有什么想法吗？并提前感谢！有什么想法吗？并提前感谢！

我有一个模态弹出窗口。它有一个类似表单组的注册表单。它具有text, checkbox,等字段select。如果用户更改任何表单控件而不保存表单，然后尝试关闭模式弹出窗口，我想显示一条警告消息以强制保存更改或离开弹出窗口。

我看过这个问答，但我不明白它是如何工作的。我在哪里可以获得FormIntactChecker班级中的表格更改状态？

我们刚刚将我们的应用程序升级到 Angular 7，我们注意到所有 ngBootstrap 模态现在在关闭按钮上都有一个默认的自动对焦，如下图所示。

这是我的代码：

html模态代码：

以及如何通过我的 component.ts 调用模态

我的问题是如何删除这个不符合我们预期行为的默认自动对焦？

感谢您的阅读，请原谅拼写错误。

目标是进行一个包含 N 个问题和 N 个问题选项的调查。

我正在尝试对问题进行分组，然后将每个单选按钮与 ng-model 及其值区分开来，以获得一个对象

JS Fiddle 或 CodePen

JSON

[ {“IdQuestion”：“5de05514fcfabc3354229e39”，​​“idSurvey”：“5ddf18d4fcfabd0ab05e1df4”，“titleQuestion”：“Porque compras？”，“IdQuestionOption”：“5de05551fcfabc3354229e3c”，“idSurveyQuestion”：“5de05514fcfab”选项" }, { "IdQuestion": "5de05514fcfabc3354229e39", "idSurvey": "5ddf18d4fcfabd0ab05e1df4", "titleQuestion": "Porque compras?", "IdQuestionOption": "5de05555fcfabc3354229e3d", "idSurveyQuestion": "33option": "5de0525e44" "Salud" }, { "IdQuestion": "5de05514fcfabc3354229e39", "idSurvey": "5ddf18d4fcfabd0ab05e1df4", "titleQuestion": "Porque compras?", "IdQuestionOption": "5de05558fcfabc3354229e3e", "idSurveyQuestion": "5de05514fcfabc3354229e39", "option": "Costumbre" }, { "IdQuestion" : "5de0552bfcfabc3354229e3a", "idSurvey": "5ddf18d4fcfabd0ab05e1df4", "titleQuestion": "Como escuchaste del producto?", "IdQuestionOption": "5de0555dfcfabc3354229e3f", "idSurveyQuestion": "5de0552bfcfabc3354229e3a", "option": "Tv" }, { "IdQuestion": "5de0552bfcfabc3354229e3a", "idSurvey”：“5ddf18d4fcfabd0ab05e1df4”，“titleQuestion”：“Como escuchaste del producto？”，“IdQuestionOption”：“5de05563fcfabc3354229e40”，“idSurveyQuestion”：“5de0552bfcfabc3354229e3a”，“选项”：“收音机”}，{ 5de0552bfcfabc3354229e3a", "idSurvey": "5ddf18d4fcfabd0ab05e1df4", "titleQuestion": "Como escuchaste del producto?", "IdQuestionOption": "5de0556efcfabc3354229e41", "idSurveyQuestion": "5de0552bfcfabc3354229e3a", "option": "Diario" }, { " IdQuestion": "5de05548fcfabc3354229e3b", "idSurvey": "5ddf18d4fcfabd0ab05e1df4", "titleQuestion": "Cada cuando consumes?", "IdQuestionOption": "5de05579fcfabc3354229e42", "idSurveyQuestion": "5de05548fcfabc3354229e3b", "option": "Diario" }, { "IdQuestion": "5de05548fcfabc3354229e3b", "idSurvey “：“5ddf18d4fcfabd0ab05e1df4”，“titleQuestion”：“Cada cuando 消费？”，“IdQuestionOption”：“5de0557dfcfabc3354229e43”，“idSurveyQuestion”：“5de05548fcfabc3354229e3b”，“选项”：“Semanal”}，“IdQuestion”：“Idfcfabc3358” , "idSurvey": "5ddf18d4fcfabd0ab05e1df4", "titleQuestion”：“Cada cuando 消费？”，“IdQuestionOption”：“5de05582fcfabc3354229e44”，“idSurveyQuestion”：“5de05548fcfabc3354229e3b”，“option”：“Mensual”}]

功能 - 控制器

HTML

看法

我想达到这个

IDE

问题：我在一个组件中有一个按钮，可以将另一个组件作为模态打开。该按钮有效，它打开了模式，除了我不能点击任何东西，无论是输入还是十字架。我已经将该组件作为 entryComponent 插入到 App 模块中：

调用模态窗口的组件 .html

调用模态窗口的组件 .ts

模态组件 .html

模态组件 .ts

我使用 ngb 模态来弹出内容设置在<ng-template>. 在提交（错误）时，我需要自动向下滚动到错误部分。我在 @viewchild 上尝试过，<div #error>但由于它是模板的一部分，因此 viewchild 值始终未定义。访问模板内的 div 或在 ngbmodal 上自动滚动到 ots 滚动高度的最佳方法是什么？

我正在使用NgbModal处理模态的 Angular 应用程序。我对如何正确关闭使用此组件实现的模态有一些疑问（直到现在我一直使用 PrimeNg 而不是ng-bootstrap）。

基本上我已经这样做了（而且它似乎工作正常）：在我的 TypeScript 代码中，我有这样的东西：

基本上，当提交帖子时会调用此方法。setAddress()方法将表单值保存在数据库中（调用另一个服务方法）。然后模态被关闭。它似乎工作正常，但我有以下疑问：

正如您所看到的，为了关闭我的模式，我使用了这个dismissAll()方法。检查文档：https ://ng-bootstrap.github.io/#/components/modal/api

它还表示我不能在我的代码上使用的close()方法。试：

IDE 对我说：

类型“NgbModal”.ts(2339) 上不存在属性“关闭”

为什么在官方文档中我有这个方法但在我的代码中没有？第一个使用的方法（dismissAll()）是否正确？它正在工作，但我对方法名称中的“全部”有一些疑问。为什么是“全部”？它让我认为它正在关闭所有模式，而不仅仅是一个模式（在我的页面中的用例中，只有一个模式，所以它无所谓，但我不确定我是否正在实施正确的逻辑来关闭我的模态）

mat-sort 和 paginator 在 ng-modal 表中不起作用。但在模态之外它工作正常。有没有解决这个问题的方法？

我创建了一个引导程序 NgModal。在表中，单击编辑按钮后，它包含一个带有一些输入字段的表单。如果我点击保存它工作正常但如果我点击取消它正在关闭但它也在更新字段数据。我想如果我点击取消它不应该保存数据或更新数据。

app.component.ts

......

app.component.html