时间戳

首页 > 解决方案 > 在 ngFor 循环的 Angular 属性中应用管道返回意外的令牌

angular - 在 ngFor 循环的 Angular 属性中应用管道返回意外的令牌

问题描述

我想以下列方式定义一个属性，但不断收到有关意外令牌的错误消息。

[attr.data-cy]="'builder-sidebar-components-' + component.name | lowercase + 'title'"

我知道可以这样做

[attr.data-cy]="'builder-sidebar-components-' + component.name | lowercase'"

但是有可能以第一种方式做到吗？请注意，我在 *ngFor 循环的上下文中使用它。

<ng-container *ngFor="let component of webComponents | filter: searchText | sort: 'name'">
    <div class="col-md-6 component-holder">
      <div (click)="clearActiveComponent();"
           (dragstart)="onComponentSelect(getComponent(component.name))"
           [attr.data-src]="'../assets/img/component-icon.svg'"
           class="card text-white bg-img justify-content-center component-icon"
           data-overlay="6" draggable="true"
           style="height: 100px; margin-bottom: 1em">
        <div #dropdown="ngbDropdown" ngbDropdown placement="bottom">
          <div (click)="$event.stopPropagation(); dropdown.open();"
               [attr.data-cy]="'builder-sidebar-components-' + component.name | lowercase"
               class="builder-sidebar-components-{{ component.name | lowercase }} card-body text-center flex-grow-0">
            <img alt="{{ component.name | lowercase }}-component"
                 class="builder-sidebar-components-{{ component.name | lowercase }}"
                 src="../assets/img/{{ component.name | lowercase }}-component-icon.svg"
                 style="height: 24px; width: 24px"/>
            <div class="builder-sidebar-components-{{ component.name | lowercase }}-card-title mb-0"
                 [attr.data-cy]="'builder-sidebar-components-' + component.name | lowercase + 'title'"
                 style="font-size: 14px; padding-top: 1em; color: #EDF0F2"><span ngbDropdownToggle>
              {{ component.name }}</span>
              <div ngbDropdownMenu>
                <button (click)="addComponent(component)" ngbDropdownItem>Add</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ng-container>

标签： angular

解决方案

请试试这个

[attr.data-cy]="'builder-sidebar-components-' + (component.name | lowercase) + 'title'"

使用 '()' 包装管道运算符和操作数

推荐阅读