抱歉,如果这是一个非常简单的问题,只是想让我了解角度弯曲网格。
我有这个组件
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>