标签: angular-flex-layout

使用 Angular Material 组件 mat-table 和 Angular Flex 布局在 div 内显示数据表。

堆栈闪电战链接

无法修复 div 内表格的宽度。如果任何列的数据较长，则表会溢出父 div。

预期的行为是为具有较长数据的列显示椭圆，并且表宽度应固定（100% 在父 div 内）并且不依赖于列数据。

在我的上一个Mean Stack项目中，我使用了角度弯曲布局，并且工作正常

我开始了一个新的项目，它的角度为7，包括flex layout 8（beta），并收到以下错误

    ERROR in 
    node_modules/@angular/flexlayout/extended/typings/class/class.d.ts(9,19): 
    error TS2305: Module '".../.../node_modules/@angular/common/common"' 
    has no exported member '?NgClassImpl' 

这是我的package.json依赖项：

"dependencies": {
   "@angular/animations": "~7.2.0",
   "@angular/cdk": "^7.3.7",
   "@angular/common": "~7.2.0",
   "@angular/compiler": "~7.2.0",
   "@angular/core": "~7.2.0",
   "@angular/flex-layout": "^8.0.0-beta.25",
   "@angular/forms": "~7.2.0",
   "@angular/http": "^7.2.15",
   "@angular/material": "^7.3.7",
   "@angular/platform-browser": "~7.2.0",
   "@angular/platform-browser-dynamic": "~7.2.0",
   "@angular/router": "~7.2.0",
   "@ng-bootstrap/ng-bootstrap": "^4.1.3",
   "bootstrap": "^4.3.1",
   "core-js": "^2.5.4",
   "hammerjs": "^2.0.8",
   "jquery": "^3.4.1",
   "material-icons": "^0.3.1",
   "popper.js": "^1.15.0",
   "rxjs": "~6.3.3",
   "tslib": "^1.9.0",
   "zone.js": "~0.8.26"
 },

谁能解释为什么会这样？在flex-layout 7.0上工作正常

我正在使用@angular/flex-layout创建一个网络应用程序。

当屏幕小于 600px ( xs)时，我尝试左右留出 5% 的边距。它在更大的屏幕上正常工作（当有fxLayout="row"-layout 时），但在xsand -fxLayout="column"情况下不能正常工作。

这是 Plunker 中的演示。

问题：如何使div's 不填充右侧的剩余空间，而是使它们仅占 90%，左右偏移 5%？

我需要创建一个带有2个简单行的页脚，分别是公司名称和年份。这是我的html片段，

<mat-toolbar color="primary" style="height: 176px">
  <span>Company name</span>
  <span>Copyright ©2019</span>
</mat-toolbar>

因此，公司名称必须位于中心（垂直和水平），并且版权应低于公司名称。

无法使用角度柔性布局设置 ngx-quill 编辑器的高度。

编辑器的高度（灰色边框）溢出了父 div（红色背景）。

堆栈闪电战

如何确保编辑器位于父 div 内？

只是我的 Angular Material Form 遇到了一点 FlexLayout 格式问题。

我的名字和姓氏输入应从头到尾覆盖整行，以便姓氏输入的左端和名字输入的右端垂直于电子邮件输入的相应端。

我怎样才能让它发挥作用？基本上我只是希望它们与其他表单输入具有匹配的宽度。

它们不是匹配的“行换行”宽度，而是非常小

这是它在移动设备上的样子，同样，名字和姓氏太小

我使用 FlexLayout 和 Angular Material 组件库来实现这一切。我只是不熟悉如何以有效的方式设置弹性盒的有用部分。

以下是相关代码，在此 component.html 文件之外没有应用任何重要的样式或布局功能。

<mat-card fxLayoutAlign="center center">
    <div *ngIf="isLoading">
        <app-loading-spinner></app-loading-spinner>
    </div>
    <div *ngIf="!isLoading">
        <form [formGroup]="contactForm" fxLayout="row wrap" (ngSubmit)="onFormSubmit()">
            <div fxLayout="row" fxLayout.lt-sm="column" fxLayoutGap="16px">
                <mat-form-field fxFlexFill color="accent">
                    <input id="fName" matInput type="text" placeholder="Your first name" formControlName="firstName">
                </mat-form-field>
                <mat-form-field fxFlexFill color="accent">
                    <input id="lName" matInput type="text" placeholder="Your last name" formControlName="lastName">
                </mat-form-field>
            </div>

            <mat-form-field fxFlexFill color="accent">
                <input id="email" matInput type="text" placeholder="Your email" formControlName="email">
            </mat-form-field>
            <mat-form-field fxFlexFill color="accent">
                <textarea
                    matInput
                    [rows]="6" …

使用此命令安装FlexLayout后

npm i -s @angular/flex-layout @angular/cdk

显然Angular CDK也安装了，我收到以下警告

The Angular Material version (12.1.4) does not match the Angular CDK version (12.2.1).
Please ensure the versions of these two packages exactly match.

我使用ng update命令来更新软件包，也尝试过ng add @angular/material，但我仍然使用相同的版本。

我该如何解决这个问题？

解决方案

命令ng add @angular/material和ng add @angular/material@latest工作正常，我检查了package.json文件并注意到我有

"dependencies": {
    ...
    "@angular/material": "^12.2.1"
    ... 
}

它只是需要ng serve再次。

还有一件事，更新似乎并Angular Material没有真正覆盖styles.scss文件，但实际上再次将相同的代码添加到文件中，所以我也必须删除它才能摆脱 scss 错误。

Angular Flex Layout 是未来发展的好选择吗？它已被弃用。但我在 npmjs.com 上看到了很多每周的下载量

我将开始使用 Angular 15 版本的新 Angular 项目。所以，我需要一个关于在我的项目中使用 Flex 布局的想法。你能帮助我吗