如何检查数据目标条件？

Question

是否有可能以更优化的方式编写如下代码：

<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>

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

Answer 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>

Answer 2

为什么不使用ng-bootstrap崩溃 ？

<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>