jjzjj

javascript - 嵌套 ng-bootstrap 选项卡(Angular 2)

coder 2024-07-15 原文

我正在尝试嵌套 ng-bootstrap 选项卡小部件，但嵌套选项卡的内容未正确显示。当我点击嵌套选项卡时，内容本身就会消失。

Minimal demo

我做错了什么？

这是 View 代码:

            <ngb-tabset>
              <ngb-tab *ngFor="let tab of tabs">
                <ng-template ngbTabTitle>
                  {{ tab.title }}
                </ng-template>
                <ng-template ngbTabContent>
                  {{ tab.content }}

                  <ngb-tabset>
                    <ngb-tab>
                      <ng-template ngbTabTitle>
                        1
                      </ng-template>
                      <ng-template ngbTabContent>
                        1
                      </ng-template>
                    </ngb-tab>
                    <ngb-tab>
                      <ng-template ngbTabTitle>
                        2
                      </ng-template>
                      <ng-template ngbTabContent>
                        2
                      </ng-template>
                    </ngb-tab>
                    <ngb-tab>
                      <ng-template ngbTabTitle>
                        3
                      </ng-template>
                      <ng-template ngbTabContent>
                        3
                      </ng-template>
                    </ngb-tab>
                  </ngb-tabset>

                </ng-template>
              </ngb-tab>
            </ngb-tabset>

最佳答案

更新

Angular 4.3.6 包含针对此问题的修复。

https://github.com/ng-bootstrap/ng-bootstrap/issues/1433#issuecomment-325104017

以前的版本

这是一个错误。

可能的解决方法可能是使用额外的模板，例如:

<ngb-tabset>
  <ngb-tab *ngFor="let tab of tabs">
    <ng-template ngbTabTitle>
      {{ tab.title }}
    </ng-template>
    <ng-template ngbTabContent>
      {{ tab.content }}
      <ng-container *ngTemplateOutlet="innerTabset"></ng-container>
    </ng-template>
  </ngb-tab>
</ngb-tabset>


<ng-template #innerTabset>
  <ngb-tabset>
    <ngb-tab>
      <ng-template ngbTabTitle>
        1
      </ng-template>
      <ng-template ngbTabContent>
        1
      </ng-template>
    </ngb-tab>
    <ngb-tab>
      <ng-template ngbTabTitle>
        2
      </ng-template>
      <ng-template ngbTabContent>
        2
      </ng-template>
    </ngb-tab>
    <ngb-tab>
      <ng-template ngbTabTitle>
        3
      </ng-template>
      <ng-template ngbTabContent>
        3
      </ng-template>
    </ngb-tab>
  </ngb-tabset>
</ng-template>

Plunker Example

您可以生成任意数量的嵌套选项卡，例如:

<ng-container *ngTemplateOutlet="innerTabset; context: { $implicit: tabs }"></ng-container>

<ng-template #innerTabset let-tabs>
  <ngb-tabset>
    <ngb-tab *ngFor="let tab of tabs">
      <ng-template ngbTabTitle>
        {{ tab.title }}
      </ng-template>
      <ng-template ngbTabContent>
        {{ tab.content }}
        <ng-template [ngIf]="tab.children">
          <ng-container *ngTemplateOutlet="innerTabset; context: { $implicit: tab.children }"></ng-container>
        </ng-template>
      </ng-template>
    </ngb-tab>
  </ngb-tabset>
</ng-template>

Plunker Example

之所以有效，是因为每个嵌入式模板都有自己的范围，并且 Angular 不会混合查询结果

关于javascript - 嵌套 ng-bootstrap 选项卡(Angular 2)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43718907/

ng-bootstrapjavascriptng-templatetemplategtangulartypescript

有关javascript - 嵌套 ng-bootstrap 选项卡(Angular 2)的更多相关文章

  1. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  2. ruby - 将散列转换为嵌套散列 - 2

    这道题是thisquestion的逆题.给定一个散列，每个键都有一个数组，例如{[:a,:b,:c]=>1,[:a,:b,:d]=>2,[:a,:e]=>3,[:f]=>4,}将其转换为嵌套哈希的最佳方法是什么{:a=>{:b=>{:c=>1,:d=>2},:e=>3,},:f=>4,} 最佳答案 这是一个迭代的解决方案，递归的解决方案留给读者作为练习:defconvert(h={})ret={}h.eachdo|k,v|node=retk[0..-2].each{|x|node[x]||={};node=node[x]}node[

  3. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  4. ruby - 默认情况下使选项为 false - 2

    这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb

  5. Ruby——嵌套类和子类是一回事吗？ - 2

    下面例子中的Nested和Child有什么区别？是否只是同一事物的不同语法？classParentclassNested...endendclassChild 最佳答案 不，它们是不同的。嵌套:Computer之外的“Processor”类只能作为Computer::Processor访问。嵌套为内部类(namespace)提供上下文。对于ruby​​解释器Computer和Computer::Processor只是两个独立的类。classComputerclassProcessor#Tocreateanobjectforthisc

  6. ruby - 模块嵌套代码风格偏好 - 2

    我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个，因为它显然有一个缺点？我有一种直觉，它可能与性能有关，因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。 最佳答案 这两种写作方法经常被混淆。首先要说的是，据我所知，没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别，可能也是最著名的，是你的

  7. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  8. ruby-on-rails - 使用回形针的嵌套形式 - 2

    我有一个名为posts的模型，它有很多附件。附件模型使用回形针。我制作了一个用于创建附件的独立模型，效果很好，这是此处说明的View(https://github.com/thoughtbot/paperclip):@attachment,:html=>{:multipart=>true}do|form|%>posts中的嵌套表单如下所示:prohibitedthispostfrombeingsaved:@attachment,:html=>{:multipart=>true}do|at_form|%>附件记录已创建，但它是空的。文件未上传。同时，帖子已成功创建...有什么想法吗？

  9. ruby-on-rails - Rails 3，嵌套资源，没有路由匹配 [PUT] - 2

    我真的为这个而疯狂。我一直在搜索答案并尝试我找到的所有内容，包括相关问题和stackoverflow上的答案，但仍然无法正常工作。我正在使用嵌套资源，但无法使表单正常工作。我总是遇到错误，例如没有路线匹配[PUT]"/galleries/1/photos"表格在这里:/galleries/1/photos/1/edit路线.rbresources:galleriesdoresources:photosendresources:galleriesresources:photos照片Controller.rbdefnew@gallery=Gallery.find(params[:galle

  10. ruby - 如何根据长度将路径数组转换为嵌套数组或散列 - 2

    我需要根据字符串路径的长度将字符串路径数组转换为符号、哈希和数组的数组给定以下数组:array=["info","services","about/company","about/history/part1","about/history/part2"]我想生成以下输出，对不同级别进行分组，根据级别的结构混合使用符号和对象。产生以下输出:[:info,:services,about:[:company,history:[:part1,:part2]]]#altsyntax[:info,:services,{:about=>[:company,{:history=>[:part1,:pa

随机推荐