css - 在 Angular 7 中注入(inject)的 html 中分配 css 类

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
      }
		}
	}
}

基本上，我需要使用偏移类通过 Bootstrap 以 GRID 样式呈现一些 JSON，但这在某种程度上不起作用。感谢您的帮助。

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]});
      }
        }
    }
}