如何检查数据目标的条件？答案

【问题标题】：How to check the condition for data-target?如何检查数据目标的条件？
【发布时间】：2019-02-17 01:18:47
【问题描述】：

有没有可能用更优化的方式写出这样的东西：

<li [ngClass]="sidebarVisible ? 'nav-item' : 'nav-item sidebar-false-new-folder'"
    *ngIf="sidebarVisible">
  <a (click)='this.createNewDirectory()' data-toggle="collapse" data-target="#navbarToggler"
              aria-controls="navbarTogglerDemo02" aria-expanded="false"
              aria-label="Toggle navigation"><i
    class="nc-icon nc-simple-add"></i>New Folder</a>
</li>

<li [ngClass]="sidebarVisible ? 'nav-item' : 'nav-item sidebar-false-new-folder'"
    *ngIf="!sidebarVisible">
  <a (click)='this.createNewDirectory();' data-toggle="collapse" 
              aria-controls="navbarTogglerDemo02" aria-expanded="false"
              aria-label="Toggle navigation"><i
    class="nc-icon nc-simple-add"></i>New Folder</a>
</li>

唯一不同的部分是data-target="#navbarToggler"。我尝试过这样的事情：

<li [ngClass]="sidebarVisible ? 'nav-item' : 'nav-item sidebar-false-new-folder'">
  <a (click)='this.createNewDirectory()' data-toggle="collapse" 
      data-target="{{ sidebarVisible ? '#navbarToggler' : '' }}" 
              aria-controls="navbarTogglerDemo02" aria-expanded="false"
              aria-label="Toggle navigation"><i
    class="nc-icon nc-simple-add"></i>New Folder</a>
</li>

不幸的是，它不起作用。有什么建议吗？

【问题讨论】：

标签： angular html typescript angular6

【解决方案1】：

你试过了吗：

<li [ngClass]="sidebarVisible ? 'nav-item' : 'nav-item sidebar-false-new-folder'">
  <a (click)='this.createNewDirectory()' data-toggle="collapse"  [attr.data-target]="sidebarVisible ? '#navbarToggler' : '' " 
              aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"><i
    class="nc-icon nc-simple-add"></i>New Folder</a>
</li>

【讨论】：

Can't bind to 'data-target' since it isn't a known property of 'a'. (")"> <a (click)='this.createNewDirectory(); this.ExecuteWhenSidebarClose()' data-toggle="collapse" [ERROR ->][data-target]="sidebarVisible ? '#navbarToggler' : '' " aria-controls="navbarTogglerDem") 还有其他想法吗？
好的，[attr.data-target]?
Cétia 真的很抱歉，但恐怕不能正常工作的侧边栏不仅仅取决于data-target="#navbarToggler"。在我看来，您使用[attr.data-target] 的解决方案很好，但我不确定。但是，在我的问题中显示的示例中，一切正常，*ngIf。从干净代码的角度来看，您认为这种解决方案是否可以接受。或者你认为这个解决方案绝对不应该出现在高质量的代码中？ :)

【解决方案2】：

为什么不使用ng-bootstrap collapse？

<p>
  <button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed"
      [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
    Toggle
  </button>
</p>
<div id="collapseExample" [ngbCollapse]="isCollapsed">
  <div class="card">
    <div class="card-body">
      You can collapse this card by clicking Toggle
    </div>
  </div>
</div>

【讨论】：