Question

所以我的代码是有角度的版本5。

我有一个带图标的按钮。我正在尝试使图标动态化。所以我想在发送图标fa fa-paper-plane和加载图标fa fa-spinner fa-spin之间切换。当我发送消息时，我应该显示微调器，当我返回消息时，我应该显示纸平面图标。

案例1）我给了fa以及无效的fa-spinner和fa-paper-plane。

<div class="send">
  <button type="submit" class="message-submit" id="btn-submit" (click)="onSubmit()">
    <i [ngClass]="{ 'fa fa-spinner fa-spin': true, 'fa fa-paper-plane': false }" aria-hidden="true" title="send"></i>
  </button>
</div>

所以这是下面的输出，在这里我得到一个正方形图标而不是微调框。

情况2）在此情况下，我也同时给出了fa和fa-spinner fa-spin和fa-paper-plane

<div class="send">
  <button type="submit" class="message-submit" id="btn-submit" (click)="onSubmit()">
    <i [ngClass]="{ 'fa fa-spinner fa-spin': false, 'fa fa-paper-plane': true }" aria-hidden="true" title="send"></i>
  </button>
</div>

所以现在发生了。

所以现在您可以看到，在两种情况之间，我刚刚交换了true false值。因此，我得出的结论是，微调器无法正常工作。但这发生了，

案例3）我再次给fa和fa-spinner和fa-paper-plane。但是我已经将fa-spinner和fa-paper-plane的位置互换了，如下所示。

<div class="send">
  <button type="submit" class="message-submit" id="btn-submit" (click)="onSubmit()">
    <i [ngClass]="{ 'fa fa-paper-plane': true, 'fa fa-spinner fa-spin': false }" aria-hidden="true" title="send"></i>
  </button>
</div>

但这是输出，这次我又得到一个盒子而不是纸飞机了（我认为这很好）。

情况4）因此，现在，在下面，您可以看到我已经交换了真实的假值。

<div class="send">
  <button type="submit" class="message-submit" id="btn-submit" (click)="onSubmit()">
    <i [ngClass]="{ 'fa fa-paper-plane': false, 'fa fa-spinner fa-spin': true }" aria-hidden="true" title="send"></i>
  </button>
</div>

好吧，这给了我这个输出。

多田。旋转器也在工作。

从这四个条件中可以看到，如果将微调器和纸平面放置在[ngClass]指令的第二位置中，则可以正常工作。

有人可以帮助我解决问题吗？

PS：是的，我没有使用true和false（我有一个flag变量）

Answer 1

当对象的键是单个类时，效果最好。

您可以改为执行以下操作：

async connect(event) {
  try {
    const userObject = {
      username: this.state.userName,
      password: this.state.password
    };
    if (!userObject.username || !userObject.password) {
      throw Error('The username/password is empty.');
    }
    let response = await fetch(('someurl.com'), {
      method: "PUT",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(userObject)
    });
    let resJSON = await response.json();
    if (!response.ok) {
      throw Error(resJSON.message);
    }
    console.info(resJSON.message);
    console.info(resJSON.message.auth_token);
    window.location = "/ledger/home";
  } catch (e) {
    document.getElementById("errorDiv").style.display = 'block';
    document.getElementById("errorDiv").innerHTML = e;
  }
}

由于class="fa" [ngClass]="{'fa-paper-plane': true, 'fa-spinner': false, 'fa-spin': false }"类应始终适用，因此是在常规的fa属性中完成的

Answer 2

当表达式的计算结果为true时，将ngClass中传递的类添加到元素的classList中，当表达式的计算结果为false时，将从ngClass中传递的类从元素的classList中删除。示例：

<div>
  <p>
    <i [ngClass]="{'fa fa-spinner fa-spin': false, 'fa fa-telegram-plane': false}"> </i>
    Random Text
  </p>

  <!-- DOM will have   <i> </i> -->

  <p>
    <i [ngClass]="{'fa fa-spinner fa-spin test test1234': true, 'fa fa-telegram test test1234' : false}"> </i>
    Random Text
  </p>

  <!-- DOM will have   <i class="fa-spinner fa-spin"> </i> -->


  <p>
    <i [ngClass]="{'fa fa-spinner fa-spin': false, 'fa fa-telegram': true}"> </i>
    Random Text
  </p>

  <!-- DOM will have   <i class="fa fa-telegram"> </i> -->

  <p>
    <i [ngClass]="{'fa fa-telegram test test1234': false, 'fa fa-spinner fa-spin test test1234': true}"> </i>
    Random Text
  </p>

  <!-- DOM will have   <i class="fa fa-spinner fa-spin test test1234"> </i> -->

</div>

示例代码：https://stackblitz.com/edit/angular-ngclass-kmherp?file=app%2Fapp.component.html

ng类的字体真棒行为

2 个答案: