角度弯曲布局,网格大小未按预期工作



抱歉,如果这是一个非常简单的问题,只是想让我了解角度弯曲网格。

我有这个组件

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

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

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>

最新更新