Назначьте класс CSS в введенном HTML в Angular 7

Question

Я хочу назначить класс CSS на основе некоторых расчетов.Это мой компонент класса:

@Component({
  selector: 'app-render-json',
  template: `<div [innerHtml]="html | safeHtml"></div>`,
  styleUrls: ['./render-json.component.css'] , encapsulation: ViewEncapsulation.ShadowDom
})

export class RenderJsonComponent {
  @Input() myJson: any;
  html = ``;
  static levelDeep = 1
  
  ngOnInit() {
    this.renderJson(this.myJson)
  }
  
  renderJson(obj) {
    RenderJsonComponent.levelDeep = RenderJsonComponent.levelDeep + 1
		for(var key in obj) {
      if(key != 'id') {
        this.html = this.html + `<div class="col-md-${RenderJsonComponent.levelDeep}  col-md-offset-${RenderJsonComponent.levelDeep}">${obj[key]}</div>`
        // This does not work but I want to do something like this
      }
		}
	}
}

По сути, мне нужно визуализировать JSON в стиле GRID через загрузчик с использованием классов смещения, но это как-то не работает.Любая помощь приветствуется.

Answer 1

@Component({
  selector: 'app-render-json',
  template: `<div [innerHtml]="safeHtml"></div><div *ngFor="jsonElements as element" class="element.class">element.obj</div>`,
  styleUrls: ['./render-json.component.css'] , encapsulation: ViewEncapsulation.ShadowDom
})

export class RenderJsonComponent {
  @Input() myJson: any;
  myLevelDeep = 1;
  jsonElements = [];

  ngOnInit() {
    this.renderJson(this.myJson)
  }

  renderJson(obj) {
    this.myLevelDeep = RenderJsonComponent.levelDeep + 1
        for(var key in obj) {
      if(key != 'id') {
        jsonElements.push({class:"col-md-" + this.myLevelDeep + " col-md-offset-" + this.myLevelDeep, obj: obj[key]});
      }
        }
    }
}