Применение канала в атрибуте Angular в ngFor l oop, возвращающем неожиданный токен

Question

Я бы хотел определить атрибут следующим образом, но продолжаю получать сообщение об ошибке о неожиданном токене.

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

Я понимаю, что это возможно сделать так

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

Но возможно ли это сделать первым способом? Обратите внимание, что я использую его в контексте * ngFor l oop.

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

Answer 1

Пожалуйста, попробуйте это

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

Оберните оператор канала и операнд, используя '()'