标签: angular-flex-layout

我目前有一个组件,看起来像:

import { Component } from '@angular/core';

@Component({
  selector: 'home-about',
  template: `
    <div
      fxFlex="50"
      fxLayout="column"
      fxLayoutAlign="center"
    >
      <div>
        <h2>About This Site</h2>
      </div>
      <p>
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
    TEXT TEXT TEXT …

我已经创建了一个简单的登录组件,我想垂直居中,但我不知道如何使用Angular Flex Layout库实现这一目标.

app.component.html

<router-outlet></router-outlet>

login.component.html

<div fxLayout fxLayoutAlign="center center">
    <mat-card fxFlex="30%">
        <mat-card-title>Login</mat-card-title>

        <mat-card-content fxLayout="column">
            <mat-form-field>
                <input matInput placeholder="Username">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="Password">
            </mat-form-field>
        </mat-card-content>

        <button mat-raised-button color="accent">Login</button>
    </mat-card>
</div>

styles.scss

body{
    margin: 0;
    background-color: #eff2f5;
}

截图:

我使用此处提供的示例来设置响应式导航栏

https://theinfogrid.com/tech/developers/angular/responsive-navbar-angular-flex-layout/

我的代码看起来非常相似

<div style="height: 85vh;">

  <mat-toolbar color="primary" mat-scroll-shrink>
    <span>{{title}}</span>
    <span class="example-spacer"></span>
    <div fxShow="true" fxHide.lt-md="true">
      <!-- The following menu items will be hidden on both SM and XS screen sizes -->
      <a href="#" mat-button>Home</a>
      <a href="#" mat-button>About</a>
      <a href="#" mat-button>Services</a>
      <a href="#" mat-button>Portfolio</a>
      <a href="#" mat-button>Start</a>
      <a href="#" mat-button>FAQ</a>
      <a href="#" mat-button>Blog</a>
      <a href="#" mat-button>Contact</a>
    </div>

    <div fxShow="true" fxHide.gt-sm="true">
      <a href="#" (click)="sidenav.open()">Show Side Menu</a>
    </div>
  </mat-toolbar>

  <mat-sidenav-container fxFlexFill class="example-container">
    <mat-sidenav #sidenav fxLayout="column">
      <div fxLayout="column">
        <a (click)="sidenav.close()" href="#" mat-button>Close</a>
        <a href="#" …

根据媒体查询，是否有任何更漂亮的方式在mat-icon-button和mat-button之间切换？我已经演示了当前的解决方案，但是它需要两个独立的按钮。

<button type=button mat-icon-button fxHide fxShow.lt-sm (click)="onEdit($event)">
  <mat-icon>edit</mat-icon>
</button>
<button type="button" mat-button fxHide.lt-sm (click)="onEdit($event)">
  <mat-icon>edit</mat-icon> Edit
</button>

演示

使用fxLayoutGap和wrap在包装的每一行的末尾都留下了令人讨厌的空白。

有没有办法解决这个问题？

https://stackblitz.com/edit/angular-fxlayoutgap-calc-mralnz?file=app%2Fapp.component.html

<div fxLayout="row wrap" fxLayoutGap="25px">
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
</div>

我在用：

• @ angular / core @ 6.0.0
• @ angular / material @ 6.0.1
• @ angular / flex-layout @ 6.0.0-beta.15

我试图按照这篇文章Angular flex-layout with ngFor来做我想做的事，但我做不到。

我有这个代码：

<div *ngFor="let room of listRoom;">
  <div class="room">
    Room {{room.label}}
    <div *ngFor="let bed of room.beds;">
      <div class="bed">
        Bed #{{bed.label}}
        <button mat-raised-button color="accent" (click)="assignThisBed(bed)">
          Assign this bed
        </button>
      </div>
    </div>
  </div>
</div>

我的listRooms元素通常在 10-15 个元素之间，我想连续有 3 个房间，然后是隔断线，3 个房间，......

有人能帮我吗？谢谢..

这是带有我的代码的StackBlitz。

我在 Angular 6.0.8 应用程序中收到如下错误。我正在使用 Angular CLI 并从 VSCode 运行。

node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(72,67) 中的错误：错误 TS1144：'{' 或 '; ' 预期的。node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(74,5)：错误 TS1128：需要声明或声明。node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(74,33): 错误 TS1005: ';' 预期的。node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(74,39)：错误 TS1109：期望表达式 d。node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(79,5)：错误 TS1128：需要声明或声明。node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(80,1)：错误 TS1128：需要声明或声明。

在应用程序中使用以下版本，

 "@angular/flex-layout": "^6.0.0-beta.17",
 "typescript": "~2.7.2"
 "rxjs": "^6.2.1",
 "@angular-devkit/build-angular": "~0.7.4",
 "@angular/cli": "~6.0.8",
 "@angular/compiler-cli": "^6.0.3",

请帮我解决这个问题！

我刚刚ng upgrade为我的Angular 6应用程序做了一个,现在我得到了:

ERROR in node_modules/@angular/flex-layout/core/typings/observable-media/observable-media.d.ts(11,14): error TS2416: Property 'subscribe' in type 'ObservableMedia' is not assignable to the same property in base type 'Subscribable<MediaChange>'.
  Type '(next?: (value: MediaChange) => void, error?: (error: any) => void, complete?: () => void) => Sub...' is not assignable to type '{ (observer?: PartialObserver<MediaChange>): Unsubscribable; (next?: (value: MediaChange) => void...'.
    Types of parameters 'next' and 'observer' are incompatible.
      Type 'PartialObserver<MediaChange>' is not assignable to type '(value: MediaChange) => void'.
        Type 'NextObserver<MediaChange>' is not …

我在 SO 中遇到了类似的错误，但是在安装、删除 node-modules、package-lock.json 再次安装后，我仍然无法摆脱错误：

./src/app/app.module.ts:8:0-63 - 错误：找不到模块：错误：包路径 ./module 未从包 /Users/pabs/FreeLance/Chris/Calculator/stamp/node_modules 导出/@angular/flex-layout （请参阅 /Users/pabs/FreeLance/Chris/Calculator/stamp/node_modules/@angular/flex-layout/package.json 中的导出字段）

{
  "name": "stamp",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.2.0",
    "@angular/cdk": "^13.2.3",
    "@angular/common": "~13.2.0",
    "@angular/compiler": "~13.2.0",
    "@angular/core": "~13.2.0",
    "@angular/flex-layout": "^13.0.0-beta.38",
    "@angular/forms": "~13.2.0",
    "@angular/material": "^13.2.3",
    "@angular/platform-browser": "~13.2.0",
    "@angular/platform-browser-dynamic": "~13.2.0",
    "@angular/router": "~13.2.0",
    "rxjs": "^6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.3",
    "@angular/cli": "~13.2.3",
    "@angular/compiler-cli": …

我使用了 Angular Material 表，我从 ts 文件绑定了数据源，但是所有数据都加载在第一页上，分页不起作用。我还有两个表，它们在同一页上，其他表也有同样的问题.

我试过了

setTimeout(() => this.dataSource.paginator = this.paginator);

和

ngAfterViewInit() {
   this.dataSource.paginator = this.paginator
}

HTML：

    <mat-table class="mt-4 table-container" fxFlex="100" [dataSource]="allUsers">
      <ng-container matColumnDef="checked">
        <mat-header-cell fxFlex="10" (click)="selectAllUsers()" *matHeaderCellDef>
          <mat-checkbox [(ngModel)]="checkedAllUsers"></mat-checkbox>
        </mat-header-cell>
        <mat-cell fxFlex="10" *matCellDef="let element">
          <mat-checkbox [(ngModel)]="element.checked"></mat-checkbox>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="firstName">
        <mat-header-cell fxFlex="25" *matHeaderCellDef> First Name </mat-header-cell>
        <mat-cell fxFlex="25" *matCellDef="let element"> {{element.firstName}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="lastName">
        <mat-header-cell fxFlex="25" *matHeaderCellDef> Last Name </mat-header-cell>
        <mat-cell fxFlex="25" *matCellDef="let element"> {{element.lastName}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="email">
        <mat-header-cell fxFlex="30" *matHeaderCellDef> Email </mat-header-cell>
        <mat-cell …