Question

在Angular 2 / CLI中使用ngx-bootstrap（4）。

尝试使用下拉列表选择要打开的模式。如果我只有一个按钮用于每个模态（不是下拉列表），模态当前工作正常，但需求要求下拉列表。

我试过像

这样的东西

<select class="detailsOption" (change)="openModal($event.target.value)">
   <option value="">Select Option</option>
   <option value={{modal1}} >Option 1</option>
   <option value={{modal2}}>Option 2</option>
</select>

<ng-template #modal1>
</ng-template

<ng-template #modal2>
</ng-template

openModal(template: TemplateRef<any>) {
  this.modalRef = this.modalService.show(template);
}

显然这个例子不起作用。但我试图找到一种方法让选项值保持模板，然后在选中时，将模板传递给openModal，然后打开模态。

我确实发现了这个家伙的问题，但它没有答案，而且他在下拉菜单中使用了点击事件，这并不能让我相信。 ngx-bootstrap calling a modal from a dropdown

Answer 1

您可以通过在(change)

的select事件中打开模式来实现此目的

<select class="detailsOption" (change)="openModal($event.target.value)">
     <option value="">Select Option</option>
     <option value="modal1" >Option 1</option>
     <option value="modal2">Option 2</option>
</select>

<!-- Option 1 -->
<common-modal  #childModalOption1 [title]="'Option1 modal'"> 
    <div class="modal-body">Option 1 selected Modal </div>
</common-modal> 

<!-- Option 2 -->
<common-modal  #childModalOption2 [title]="'Option 2modal'"> 
    <div class="modal-body">Option 2 selected Modal </div>
</common-modal>

您应该通过使用modal-component装饰器

装饰@ViewChild来多次引用

@ViewChild('childModalOption1') childModalOption1 :CommonModalComponent;
@ViewChild('childModalOption2') childModalOption2 :CommonModalComponent;

openModal

您的openModal(event){ if(event==='modal1'){ this.childModalOption1.show() console.log(event) } else if(event==='modal2'){ this.childModalOption2.show() } }方法应为

webview.getSettings().setJavaScriptEnabled(true);
web.getSettings().setDomStorageEnabled(true);

webview.loadUrl(urlString);
webview.setWebViewClient(new WebViewClient(){

public void onPageFinished(WebView view, String url){  
   super.onPageFinished(view, url);
   String js = "javascript:var x =document.getElementById('username').value = '"+user+"';var y=document.getElementById('password').value='"+pass+"';";

   if (Build.VERSION.SDK_INT >= 19) {
            view.evaluateJavascript(js, new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String s) {

                }
            });
        } else {
            view.loadUrl(js);
        }

   view.loadUrl(js);
}


});

<强> LIVE DEMO

使用下拉列表中的选项打开模态 - Angular 2 + ngx

1 个答案: