仅将 ngClass 用于一个元素，而不是所有具有相同类的元素

编程问答 2022-05-19

问题描述

我是 Angular 的新手。我有一个页面，我有一个注册表单作为模板中的模式，成功消息或错误消息显示在单独的模式中。根据它是成功还是错误，我使用 ngClass 来改变模态的背景颜色，但这也会改变注册表单模态的背景颜色。

请建议我应该如何使用 ngClass 以便它只影响消息模式。

我现在习惯如下：

<TextView
android:text="@string/hello_world"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="@style/TextAppearance.FontPath"/>

解决方法

我假设您有两个 [ngClass]="{'bg-danger': errorMessage,'bg-success': successMessage}"： 1. 对于注册模式； 2.对于消息模态。

当你真正需要一个时，为什么你有两个，只用于消息模式？

在您只需要的消息模态 html 文件上。

<h1 mat-dialog-title>Dialog with elements</h1>
<div mat-dialog-content>
  <p [ngClass]="{'bg-danger': errorMessage,'bg-success': successMessage}">
    Result
  </p>
</div>

<div mat-dialog-actions>
  <button mat-button mat-dialog-close>Close</button>
</div>

这里是一个例子：https://stackblitz.com/edit/angular-ab9mwq?file=src%2Fstyles.scss

angularangularjavascriptng-class