在角度 11 中，如何使插入符号有条件地旋转？

如何解决在角度 11 中，如何使插入符号有条件地旋转？

我已经尝试了所有可以想象的方法。当 showNavDropdownDashboard 为真或假时，我需要插入符号旋转，目前无关紧要。我唯一一次让插入符号旋转是当我设置 transform="rotate-180-deg" 时，没有其他任何效果...

设置rotate="90" 失败，因为"TS2322: 类型'"90"' 不能分配给类型'90 | 180 | 270 | 未定义'。"

使用 ngClass 失败了，我从来没有看到分配的类......我尝试了我能找到的所有等效格式，但它变得很荒谬。

<div type="button" (click)="collapse.toggle()">
    <fa-icon [icon]="caret"></fa-icon>
</div>
<div #collapse="ngbCollapse" [(ngbCollapse)]="!showNavTop">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <button class="navbar-toggler" type="button" (click)="showNavDropdownDashboard = !showNavDropdownDashboard">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="navbar-collapse" [class.collapse]="!showNavDropdownDashboard">
            <ul ngbNav class="navbar-nav">
                <li ngbDropdown>
                    <div ngbNavLink ngbDropdownToggle>
                        linkies
                    </div>
                    <div ngbDropdownMenu class="dropdown-menu-dark">
                        <button ngbDropdownItem>- 1 Demo</button>
                        <button ngbDropdownItem>- 2 Demo</button>
                        <button ngbDropdownItem>+ New Dashboard</button>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
</div>

类

import { Component,OnInit } from '@angular/core';
import { faCaretUp } from '@fortawesome/free-solid-svg-icons';
@Component({
  selector: 'app-nav-top',templateUrl: './nav-top.component.html',styleUrls: ['./nav-top.component.css']
})
export class NavTopComponent implements OnInit {
  caret = faCaretUp;
  constructor() { }

  public showNavDropdownDashboard = false;
  public showNavTop = false;
  ngOnInit(): void {
  }
}

css

.transform-turn-0 {
    transform:rotate(-0deg);
    transition:all 0.3s ease-in-out; /*for smoothness*/
}
.transform-turn-180 {
    transform:rotate(-180deg);
    transition:all 0.3s ease-in-out; /*for smoothness*/
}

角度版本

Angular CLI: 11.2.5
Node: 15.11.0
OS: win32 x64

Angular: 11.2.6
... animations,common,compiler,compiler-cli,core,forms
... localize,platform-browser,platform-browser-dynamic,router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.5
@angular-devkit/build-angular   0.1102.5
@angular-devkit/core            11.2.5
@angular-devkit/schematics      11.2.5
@angular/cli                    11.2.5
@schematics/angular             11.2.5
@schematics/update              0.1102.5
rxjs                            6.6.6
typescript                      4.1.5

解决方法

试试这个：

<fa-icon [icon]="caret" [rotate]="90"></fa-icon>

这种方法为我解决了问题。

不幸的是，我仍然主要是 TypeScript 和 Angular 的初学者，所以我无法自信地解释为什么会这样。我遇到了同样的问题，我看到你的帖子寻找答案。也许知识渊博的 TypeScript/Angular 开发者可以解释一下。

我怀疑它是这样的：

rotate="90" 被视为正常的属性分配，因此值“90”是一个字符串。 TypeScript 期望旋转为数字（90 或 180 或 270 或未定义）

[rotate]="90" "" 中的值被视为 TypeScript 代码。值“90”被视为数字，TypeScript 很高兴一切都有效。

至于您的第二个要求，即旋转仅在 showNavDropdownDashboard === true 时发生，您可以利用属性分配中的 TypeScript 执行，例如

 <fa-icon [icon]="caret" [rotate]="showNavDropdownDashboard === true ? 90 : undefined"></fa-icon>