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

Question

我在更新到 Angular 7 后遇到 ngStyle 问题。在 Angular 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 元素检查器网格区域进行了检查。

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

这里是错误的屏幕截图。

有什么建议吗？

Answer 1

我也有同样的问题。 ngStyle 正在取代这个： { 'grid-column': (width > 1 ? column + ' / ' + (column + width) : column + ''), 'grid-row': '' + row }
有了这个： style="grid-area: 1 / unsafe / auto / unsafe 当宽度 > 1

Answer 2

HTML

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

TS

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

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