Winkelinterpolation mit "ngIf"

Question

Ich habe eine Tabelle, in der die erste Spalte eine bestimmte Farbe gemäß einer Variablen in meiner Klasse annehmen soll. Zum Beispiel habe ich eine Klasse DisplayProject.ts, die ein Attribut namens hatindexOfColor

DisplayProject.ts

export class DispalyProject implements OnInit {
  ngOnInit(): void {
  }

  project: Project;
  indexOfColor: number = 1; // can be 2 

  constructor () {
  }
}

DisplayProject.html

<table>
  <thead>
    <tr>
      <th>the project name</th>
      <th>the project date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>project.name</td>
      <td>project.date</td>
    </tr>
  </tbody>
</table>

Ich möchte, dass die Spalte "Der Projektname" grün indexOfColor = 1und blau ist, wennindexOfColor = 2

Irgendwelche Lösungen?

Answer 1

Mit ngStyle können Sie bestimmte Stile basierend auf Variablen implementieren.

<th [ngStyle]="{ 'background-color': indexOfColor == 1 ? 'green' : 'blue' }">
  the project name
</th>

Answer 2

Komponente:

@Component({ selector: 'app-comp', ... })
export class DispalyProject {
  @Input() public project: Project;
  @Input() public indexOfColor: 1 | 2 = 1; //can be 2
}

SCSS-Stylesheet:

.default-color {
  color: green;
}
.blue {
  color: blue;
}

Vorlage:

<table>
  <thead>
    <tr>
     <th class="default-color" [ngClass]="{ blue: indexOfColor === 2 }">
       the project name
     </th>
     <th>
       the project date
     </th>
    </tr>
  </thead>
  <tbody>
   <tr>
     <td>project.name</td>
     <td>project.date</td>
   </tr>
  </tbody>
</table>

Answer 3

Wenn Sie Klasse verwenden, können Sie Folgendes tun:

SCSS

.color-green {
  color: green;
}

.color-blue {
  color: blue;
}

Vorlage:

<th [ngClass]="{
    'color-green': indexOfColor === 1
    'color-blue': indexOfColor === 2
    }">
    the project name
</th>

In diesem Fall müssen Sie nur eine Zeile hinzufügen, wenn Sie eines Tages eine weitere Bedingung hinzufügen möchten

Answer 4

<th [style.background]="{ indexOfColor == 1 ? 'green' : {indexOfColor == 2 ? 'blue' :'black'}">
</th>

Referenz vom Bindungswert zum Stil