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 / 跨度 2 也不起作用

这是错误的屏幕截图。

有什么建议吗？

Answer 1

HTML

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

TS

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

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

Answer 2

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

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

NgStyle in Angular 7 CSS grid layout not working properly?

css

ng-style

angular7