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

您是否尝试过：

"${versions.okhttp}"

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

如何检查数据目标条件？

2 个答案: