Angular 7 CSS网格布局中的NgStyle无法正常工作？

Question

更新到角度7后，我遇到了ngStyle的问题。在角度5中它的工作正常。

使用ngStyle我用Css网格动态应用样式。

但不知道为什么'grid-column'：'1 / span 2'不起作用。

这是我的代码

<div class="widthHeight100"
     [ngStyle]="getStyleForGroup(group)">
  <div *ngFor="let subGroup of group?.childs"
       [ngStyle]="getStyleForSubGroup(subGroup)">

在打字稿中

网格容器：

  getStyleForGroup(mdg: MdgSimple) {
let style: any = {
  'width': '100%',
  'height': '100%'
};
if (!isNullOrUndefined(mdg)) {
  if (!isNullOrUndefined(mdg.childs)) {
    if (mdg.childs.length > 0) {
      style = {
        'display': 'grid',
        'grid-template-rows': this.getGridTemplateCount(mdg.childs, true),
        'grid-template-columns': this.getGridTemplateCount(mdg.childs, false),
        'grid-column-gap': '4px',
        'grid-row-gap': '4px',
        'justify-items': 'start',
        'align-items': 'start',
        'padding': '5px'
      };
    }
  }
}
return style;

}

柴尔兹：

  getStyleForSubGroup(mdsg: MdsgSimple) {
let style: any = {
  'width': '100%',
  'height': '100%'
};
if (!isNullOrUndefined(mdsg) && !isNullOrUndefined(mdsg.layout)) {
  style = {
    'grid-row': this.getCssRowInfo(mdsg),
    'grid-column': this.getCssColumnInfo(mdsg),

    'height': this.getHeight(mdsg),
    'width': this.getWidth(mdsg),
    'min-width': this.getMinWidth(mdsg),
    'max-width': this.getMaxWidth(mdsg),
    'min-height': this.getMinHeight(mdsg),
    'max-height': this.getMaxHeight(mdsg),
  };
}
return style;

}

但控件相互重叠。我已经检查过使用chrome css元素检查器网格区域显示不安全。

但它在角度5版本中一切正常。示例1 / span 2也不起作用

这是错误的屏幕截图。

有什么建议吗？

Answer 1

我有完全相同的问题。 ngStyle正在取代它：

{
      'grid-column': (width > 1 ? column + ' / ' + (column + width) : column + ''),
      'grid-row': '' + row
     }

这个：当宽度> 1时style="grid-area: 1 / unsafe / auto / unsafe

Answer 2

HTML

<p [ngStyle]="myStyles">
    Hello World!
</p>

TS

myStyles = {
    'color': 'red',
    'font-size': '20px',
    'font-weight': 'bold'
}

我只是写了非常基本的代码，试试这个我希望它能帮到你。谢谢