Interpolacja kątowa za pomocą „ngIf”

Question

Mam tabelę, w której chcę, aby pierwsza kolumna miała określony kolor zgodnie ze zmienną w mojej klasie. Na przykład mam klasę DisplayProject.ts, która ma atrybut o nazwieindexOfColor

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>

Chcę, aby kolumna „nazwa projektu” była zielona „jeśli” indexOfColor = 1i niebieska „jeśli”indexOfColor = 2

Jakieś rozwiązania?

Answer 1

Możesz użyć ngStyle do implementacji określonych stylów na podstawie zmiennych.

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

Answer 2

Składnik:

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

Arkusz stylów SCSS:

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

Szablon:

<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

Jeśli korzystasz z zajęć, możesz:

SCSS

.color-green {
  color: green;
}

.color-blue {
  color: blue;
}

Szablon:

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

W takim przypadku, jeśli pewnego dnia chcesz dodać kolejny warunek, wystarczy dodać jedną linię

Answer 4

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

Odwołanie od wartości powiązania do stylu