角度弹性布局，网格大小未按预期工作答案

【问题标题】：Angular flex-layout, grid size not working as expected角度弹性布局，网格大小未按预期工作
【发布时间】：2019-06-02 00:39:08
【问题描述】：

对不起，如果这是一个非常简单的问题，我只是想了解一下角度弹性网格。

我有这个组件

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

如果有人能告诉我我做错了什么，将不胜感激。

【问题讨论】：

标签： angular7 angular-flex-layout

【解决方案1】：

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>

【讨论】：