NgStyle в Angular 7 CSS сетка не работает должным образом? - PullRequest
Новая
       21

NgStyle в Angular 7 CSS сетка не работает должным образом?

1 голос
/ 19 марта 2019

У меня проблема с ngStyle после обновления до angular 7. В 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, показывая небезопасный.

Но в угловой версии 5 все работает нормально. пример 1 / span 2 тоже не работает

здесь снимок экрана для ошибки. enter image description here

Любое предложение, пожалуйста?

Ответы [ 2 ]

0 голосов
/ 16 апреля 2019

У меня точно такая же проблема.ngStyle заменяет это: { 'grid-column': (width > 1 ? column + ' / ' + (column + width) : column + ''), 'grid-row': '' + row }
на это: style="grid-area: 1 / unsafe / auto / unsafe при ширине> 1

0 голосов
/ 19 марта 2019

HTML 

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

TS 

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

Я просто пишу очень простой код, попробуйте это, я надеюсь, это поможет вам.Спасибо

...