要更改Angular 7 Material 7中flex-layout网格列表项的顺序/流程,可以使用flex-layout提供的flex属性和order属性。
首先,确保已安装了flex-layout库。使用以下命令安装:
npm install @angular/flex-layout@7.0.0-beta.19
接下来,在你的组件中引入flex-layout的相关模块。在你的组件的.ts
文件中添加以下代码:
import { FlexLayoutModule } from '@angular/flex-layout';
然后,在你的组件的.html
模板中,使用fxLayout
和fxFlex
来设置网格的布局和尺寸。同时,使用order
属性来设置网格项的顺序。示例如下:
Grid Item 1
Grid Item 2
在上面的示例中,fxFlexOrder
属性用于设置网格项的顺序。默认情况下,网格项的顺序是根据它们在HTML中的顺序确定的。通过设置不同的fxFlexOrder
值,可以更改网格项的顺序。
注意,fxFlex
属性用于设置网格项的尺寸,fxFlexOffset
属性用于设置网格项的偏移量。
最后,确保在你的模块中导入了FlexLayoutModule
。在你的模块的.ts
文件中添加以下代码:
import { FlexLayoutModule } from '@angular/flex-layout';
@NgModule({
imports: [
FlexLayoutModule,
// other imports
],
// other module configurations
})
export class YourModule { }
这样,你就可以使用flex-layout来更改Angular 7 Material 7中网格列表项的顺序/流程了。