Angular 弹性布局，网格大小未按预期工作

Question

抱歉，如果这是一个非常简单的问题，我只是想了解一下 angular 弹性网格。

我有这个组件

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 个部分，一个占页面宽度的 70%，另一个占页面宽度的 30%，但我没有得到

你可以在这里看到这个

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

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

Answer 1

fxLayout="row"

仅适用于直接子 be

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>

Angular 弹性布局，网格大小未按预期工作

Angular flex-layout, grid size not working as expected

angular7

angular-flex-layout