Угловая гибкая компоновка, размер сетки не работает должным образом - PullRequest
Новая
       17

Угловая гибкая компоновка, размер сетки не работает должным образом

0 голосов
/ 07 января 2019

Извините, если это действительно простая проблема, просто пытаюсь разобраться с угловой гибкой сеткой.

У меня есть этот компонент 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';


viewAreas: any[] =
    [{
      areaName: 'A',
      layoutSize: "70",
    },
      {
        areaName: 'B',
        layoutSize: "30"
      }
    ];
}

вместе с этим шаблоном 

<div fxLayout="row">
  <div *ngFor="let area of viewAreas" style="border: 2px solid red">
    <div [fxFlex.gt-sm]="area.layoutSize"
         [fxFlex.gt-xs]="area.layoutSize"
         [fxFlex]="area.layoutSize">
          {{area.areaName }} {{area.layoutSize }}
    </div>
  </div>
</div>

Я ожидаю, что это даст мне строку с 2 разделами, 1 70% ширины страницы и еще 30%, но я не получаю это

Вы можете увидеть это здесь

https://stackblitz.com/edit/angular-umhsx2

Если кто-то скажет мне, что я делаю неправильно, это будет оценено.

1 Ответ

0 голосов
/ 14 января 2019 
fxLayout="row"

Работает только с прямым ребенком быть 

fxFlex.gt-*

Так что попробуйте следующий код. 

<div fxLayout="row">
    <div *ngFor="let area of viewAreas" style="border: 2px solid red" [fxFlex.gt-sm]="area.layoutSize"
         [fxFlex.gt-xs]="area.layoutSize"
         [fxFlex]="area.layoutSize">
          {{area.areaName }} {{area.layoutSize }}
  </div>
</div>
...