Блог

Я хотел бы динамически присваивать класс определенной ячейке в таблице.

 <td *ngFor="let col of cols" [ngClass]="col.condition">
  

Объект в «cols» может выглядеть следующим образом:

 {condition: '{'prio-high': priority == 0}', noCondition: 'prio-high'}
  

Я убедился, что приоритет действительно равен == 0.

Возможно ли это вообще? Следующий пример работает просто отлично. Кажется, это просто не работает, если я хочу работать с условиями.

 <td *ngFor="let col of cols" [ngClass]="col.noCondition">
  

Пример:

.html

 <style>
  .condition{background-color: red}
  .noCondition{background-color: blue}
  .someRandomOtherCondition{background-color: orange}
</style>

<div *ngFor="let o of objects" [ngClass]="o.template">
  {{ o.name }} has priority {{ o.prio }}
</div>  
  

.тс

 export class AppComponent  {

  info = [
      {object1: 'noCondition'},
      {object2: '{'condition': prio == 0}'}
    ]

  objects = [
    {
      name: 'object1',
      prio: 0, //imagine this number is being dynamically assigned and we don't know the value beforehand
      template: 'noCondition'
    },
    {
      name: 'object3',
      prio: 0, //imagine this number is being dynamically assigned and we don't know the value beforehand
      template: 'someRandomOtherCondition'
    },
    {
      name: 'object2',
      prio: 1, //imagine this number is being dynamically assigned and we don't know the value beforehand
      template: '{'condition': prio == 1}'
    }
  ];

}
  

если вы запустите этот пример, вы увидите, что object2 никогда не форматируется должным образом, как это должно быть.

stackblitz:https://stackblitz.com/edit/angular-dani1p

Вы можете протестировать разные случаи с одной и той же переменной примерно так

компонент

   state : number=0;

  ngOnInit() {
    setInterval( () => {
      this.state = Math.floor(Math.random() * 15)
    },2000)
  }
  

шаблон

 <p [ngClass] ="{red: state < 5,green : state >=5 amp;amp; state <=7 , blue : state > 7 }">
  O.o => {{state}}  something magical happen :)
</p>
  

Демонстрация 🚀🚀

итак, в вашем случае вы можете обновить ngClass примерно так

 <ul>

  <li *ngFor="let col of cols" 
    [ngClass]="{red:col.priority == 0,green: col.priority == 1,blue:  col.priority==3}">
            {{col.name}} priority => {{col.priority}}
        </li>
    </ul>
  

Демонстрация 🌟🌟

ОБНОВЛЕНО!💣👻

нам нужно оценить строковое условие, где условие включает свойство объекта, подобное переменной, это напоминает мне о [with][3] инструкции, пока вы не можете использовать with инструкцию, но я пытаюсь получить тот же результат, используя Function constructor и object destructor , и результат выглядит следующим образом ⬇

   public getCondition(obj, condition) {
    const props = Object.keys(obj).reduce( (acc, next) => `${acc} , ${next}`);
    const evalCon = new Function(` return function ({${props}})  { return ${condition}} `);
    return evalCon()(obj)
  }
  

шаблон

 <ul>
    <li *ngFor="let obj of objects" [ngClass]="getCondition(obj,obj.template)" >
        {{obj.name}} 
    </li>
</ul>
  

Демонстрация 🔥🔥

NgClass может использоваться с инструкцией if для динамического назначения классов.

Вот пример, если вы хотите присвоить класс, "prio-high" когда условие col.noCondition равно 0 :

<td *ngFor="let col of cols" [ngClass]="{'prio-hight' : col.noCondition == 0}">