Question

我在bootstrap和angular 2（TS）方面存在一些问题，我正在尝试制作一个中小宽度的按钮，显示一个窗口按钮，当你点击它时会显示一个流行和评论新闻的列表。我的第一个问题是，即使选项卡被隐藏，新闻也始终可见，第二个问题是，当我点击任何选项卡时，它只会显示第一个新选项。

按钮：

<extension point="org.eclipse.ui.navigator.navigatorContent">
    <actionProvider
        class=".....ActionProvider"
        id="new_menu1"
        overrides="menu1">
        <enablement>
            <instanceof value="......" />
        </enablement>
    </actionProvider>
</extension>

public class ActionProvider extends CommonActionProvider {
// empty class
}

选项卡：

  <button (click)="showNews()" type="button" class="navbar-toggle pull-right collapsed" data-toggle="collapse" data-target="#popular-news">
    <span class="sr-only">Toggle menu</span>
    <span class="glyphicon glyphicon-th-large"></span>
  </button>

标签内容：

<div class="collapse navbar-collapse" id="popular-news">
  <ul class="nav navbar-nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#popular">Popular</a></li>
    <li class=""><a data-toggle="tab" href="#commented">Commented</a></li>
  </ul>
  <div #indicator1 class="indicator"></div>
  <div #indicator2 class="indicator"></div>
</div>

TypeScript代码：

    <section class="best-news tab-content" #bestNews>
      <div id="popular" *ngFor="let notice of news" class="tab-pane fade in active">
        <div class="pnew-img">
          <img src="./img/default.png" class="img-responsive">
        </div>
        <div>
          <p class="pnew-title">{{ notice.noticeTitle}}</p>
          <span class="glyphicon glyphicon-eye-open"></span>
        </div>
      </div>
      <div id="commented" class="tab-pane fade" *ngFor="let notice of news">
        <div class="pnew-img">
          <img src="./img/default.png" class="img-responsive">
        </div>
        <div>
          <p class="pnew-title">{{ notice.noticeTitle }}</p>
          <span class="glyphicon glyphicon-comment"></span>
        </div>
      </div>
    </section>

任何人都可以帮助我吗？

Answer 1

您的标签内容似乎存在一些ID问题：

 <section class="best-news tab-content" #bestNews>
      <div id="popular" class="tab-pane fade in active">
        <div class="pnew-img" *ngFor="let notice of news">
          <img src="./img/default.png" class="img-responsive">
        </div>
        <div>
          <p class="pnew-title">{{ notice.noticeTitle}}</p>
          <span class="glyphicon glyphicon-eye-open"></span>
        </div>
      </div>
      <div id="commented" class="tab-pane fade">
        <div class="pnew-img" *ngFor="let notice of news">
          <img src="./img/default.png" class="img-responsive">
        </div>
        <div>
          <p class="pnew-title">{{ notice.noticeTitle }}</p>
          <span class="glyphicon glyphicon-comment"></span>
        </div>
      </div>
    </section>

*ngFor <div>位于受{44}}控制的id="popular"上：id="commented"和*ngFor。当迭代结束时，你会得到多个＆＃34; id＆＃34;在DOM中是相同的 - 没有好处。我将id向下移动到每个部分的树的内容区域，这使得标签控制div成为他们自己的[Category] category_id category_name [briefs] brief_id category_id brief_file_num brief_date "SELECT brief_file_num,category_id FROM briefs,category WHERE briefs.category_id = category.category_id ORDER BY briefs.brief_file_num DESC LIMIT 1";并允许在该div中循环显示。如果您确实需要将标签div循环播放，请告诉我。

Bootstrap选项卡内容与* ngFor冲突

1 个答案: