- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
Angular 7
/ngx-bootstrap 4.0.1
依赖
:
"bootstrap": "3.3.7",
"bootstrap-colorpicker": "2.5.1",
"bootstrap-duallistbox": "3.0.6",
"bootstrap-markdown": "2.10.0",
"bootstrap-progressbar": "0.9.0",
"bootstrap-slider": "9.8.0",
"bootstrap-tagsinput": "0.7.1",
"bootstrap-timepicker": "0.5.2",
在 Angular 7 中,我有一个组件。它只是一个按钮,当您单击它时,它会显示一个模式。
如果我从像 div 这样的元素调用它,它就可以工作。
但是当我从下拉菜单中调用它时,模式不会出现。
这是我的代码:
正常调用:模态可见:
<shared-article-copy (ArticleEM)="addArticle($event, 'articleCopie')" [agentId]="this.samplesBill.recipient.agent_Id"
*ngIf="this.samplesBill && this.samplesBill.recipient"></shared-article-copy>
从下拉菜单调用:模式不可见:
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Test 1</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Test2 <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li> <shared-article-copy (ArticleEM)="addArticle($event, 'articleCopie')" [agentId]="this.samplesBill.recipient.agent_Id"
*ngIf="this.samplesBill && this.samplesBill.recipient"></shared-article-copy></li>
</ul>
</div>
</div>
我认为,我的组件的 View 绑定(bind)到 li
元素而不是主体。
这是我的组件 View shared-article-copy
的部分代码:
<button type="button" class="btn btn-labeled btn-primary" (click)="loadModalArticleImport()" ng-dblclick="return false;">
<span class="btn-label">
<i class="fa fa-plus"></i>
</span>{{ textTitle }}
</button>
<div bsModal #calculatorModal="bs-modal" class="modal fade" tabindex="0" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true" style="background-color: white" [hidden]="!articleCalculator" (onHidden)="closeCalculatorModal()"
>
<div class="modal-dialog modal-lg" style="background-color: white">
<div class="modal-content">
<div class="modal-header" *ngIf="articleCalculator">
Modal Header
</div>
<div class="modal-body">
modal body !
</div>
</div>
</div>
</div>
我无法复制组件的所有代码,因为它们不相关。
这是一部分:
export class SharedArticleCopyComponent implements OnInit {
@Input() buttonClass: string;
@Input() agent: Agent; // pour avoir un client par défaut
@Input() agentId: string; // Quand on a pas lagent mais que son ID people
@Input() textTitle: string = 'Copier un article existant';
@Input() calculatorTitle: string = 'Détails de l\'article: ';
@Input() AgentReadonly: boolean = false;
@Output() public ArticleEM: EventEmitter<Article> = new EventEmitter<Article>();
@ViewChild('copyArticleModal') public lgModal: ModalDirective;
@ViewChild('calculatorModal') public lgCalculatorModal;
constructor(private httpClient: HttpClient, private articlesService: ArticlesService, public agentsClientsService: AgentsClientsService, public peopleService: PeopleService,
private sessionService: SessionService, private _route: ActivatedRoute,
private notificationLGIService: NotificationLGIService, private datePipe: DatePipe, private domService: DomService) {
}
即使我从下拉菜单中调用组件,我怎样才能使模态可见?
编辑以添加 loadModalArticleImport 的内容:
//lgModal: @ViewChild('copyArticleModal') public lgModal: ModalDirective;
loadModalArticleImport() {
this.lgModal.show();
}
最佳答案
您看不到模态框,因为它在打开时是隐藏下拉菜单的子菜单。
当您将组件放入下拉列表中时,您最终会得到以下 DOM 结构。
drop-down menu(position:absolute) > shared-article-copy > modal(position:fixed)
当您单击按钮打开模式时,模式会打开,但下拉菜单也会关闭,显示设置为 none
。
drop-down menu(display:none) > shared-article-copy > modal(position:fixed)
因此您看不到下拉菜单及其任何子项(包括您的模式)。
解决方案:
包含模式的引导下拉菜单的 CSS:
.dropdown-menu.contains-modal {
position: unset;
display: inline-block;
height: 0;
width: 0;
min-width: unset;
overflow: hidden;
border: 0;
padding: 0;
}
.open>.dropdown-menu.contains-modal {
position: absolute;
height: unset;
width: unset;
min-width: 160px;
padding: 5px 0;
border: 1px solid rgba(0,0,0,.15);
overflow: unset;
}
并使用
<ul class="dropdown-menu contains-modal">...
代替
<ul class="dropdown-menu">...
关于javascript - 将组件 View 附加到主体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56306101/
我关注了 tutorial on creating a popup for an add-on在 Firefox 中,效果很好。 我现在遇到的问题是它创建的弹出窗口不会更改大小以适应我添加到其中的内容
我有一些视频,我需要连接一个标题并添加一些覆盖,问题是我需要先做覆盖,否则时间不正确,然后才将标题连接到视频的开头 ffmpeg -i talk.mp4 -i start_pancarte.png
我正在尝试附加一个 CSV 文件。这是我正在使用的线路。不幸的是,我找不到 export-csv 的附加选项。任何想法都有助于使其发挥作用。 Get-ADGroupMember "Domain Adm
我正在努力理解 Attach API (com.sun.tools.attach.*) 的用途。它的典型用途是什么?它是为了“模拟”JVM,以便您可以在不部署/启动代码的情况下测试您的代码吗?它是一个
我不明白为什么这不起作用。 soup_main = BeautifulSoup('FooBar') soup_append = BeautifulSoup('Meh') soup_main.body.
我有以下代码来返回我想要的字符串 $sql = " SELECT `description` FROM `auctions` WHERE `description` REGEX
我正在尝试从数组中附加具有多个值的元素,但我做错了。这是我的代码: for(var i=0; i ` + pricesArray[i].start_date ` ` + pricesArray[i
我正在尝试将图像链接添加到此 javascript 附加表中。使图像位于按钮上方 这是代码 $("#1").append(""+section+""+no+""+price+""+button+""
我有一个问题,我已经解决了,但它太烦人了。 我有一个 js 代码,当使用“追加”按下按钮时,它会放下一些 html 代码,并且通过该代码,我为 x 按钮提供了一个 id,并为容器元素提供了一个 id。
我想逐行读取文件,并且每一行可能都有很多字符。 这个版本的readline效果很好 func readLine(r *bufio.Reader) ([]byte, error) { var (
我有一个网站,每次用户登录或注销时,我都会将其保存到文本文件中。 如果不存在,我的代码在附加数据或创建文本文件时不起作用。这是示例代码 $myfile = fopen("logs.txt", "wr"
我正在尝试使用 typescript 和 Formik 创建一个自定义输入字段。我可以就完成以下代码的最佳方式获得一些帮助吗?我需要添加额外的 Prop 标签和名称......我已经坚持了一段时间,希
我有一个字符串 big_html,我想将它添加到某个 div 中。我观察到以下方面的性能差异: $('#some-div').append( big_html ); // takes about 10
如何使用 FormData 创建以下结果 ------WebKitFormBoundaryOmz20xyMCkE27rN7 Content-Disposition: form-data; name="
有没有办法附加 jQuery 事件处理程序,以便在任何先前附加的事件处理程序之前触发该处理程序?我遇到了this article ,但代码不起作用,因为事件处理程序不再存储在数组中,而这正是他的代码所
我正在开发一个需要网络登录的 iPhone 应用程序。像往常一样我打电话 [[UIApplication sharedApplication] openURL:loginURL]; 这将关闭应用程序并
我想开发一个仅针对特定域激活的扩展。 我不希望它在不浏览此特定域时出现在浏览器菜单中。 有可能这样做吗? 最佳答案 可能:对于菜单,您可以添加一个弹出窗口侦听器,用于检查当前加载的URL(docs f
这段 JavaScript 代码 function writeCookie(CookieName, CookieValue, CookieDuration) { var expiration
我正在使用 Handlebars 来渲染使用ajax从本地服务器获得的信息。我的 HTML 看起来像: {{#each Tabs}}
我尝试了以下代码,但当输入框中没有数据时它不会通知。当我直接添加此内容(不附加)时,它会起作用。我在这里做错了什么 var output = "\n"+ "\n"+
我是一名优秀的程序员,十分优秀!