标签: angular-material

我正在使用mat-table.它有一个过滤器,可以正常使用doc示例:

从https://material.angular.io/components/table/overview,原始代码是:

    <div class="example-header">
       <mat-form-field>
         <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
       </mat-form-field>
   </div>

   <mat-table #table [dataSource]="dataSource">
      <!-- the rest of the code -->
   </mat-table>

    export class TableFilteringExample {
     displayedColumns = ['position', 'name', 'weight', 'symbol'];
     dataSource = new MatTableDataSource(ELEMENT_DATA);

     applyFilter(filterValue: string) {
       filterValue = filterValue.trim(); // Remove whitespace
       filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
       this.dataSource.filter = filterValue;
     }
    }
    const ELEMENT_DATA: Element[] = [
     {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
     {position: 2, name: 'Helium', weight: 4.0026, …

如何在我的应用程序中设置页脚（我使用 Angular Material），以便它：

1. 如果内容高度小于视口，则粘在底部
2. 如果内容高度超过视口，则向下移动/被向下推

更重要的一件事 - 我想通过angular/flex-layout来实现这一点，而不是通过标准的 HTML/CSS 'flex-box'。

<mat-sidenav-container>
  <mat-sidenav #sidenav
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">

    <mat-nav-list>
      <mat-list-item *ngFor="let li of listItems" routerLink="{{li.link}}">
        <mat-icon mat-list-icon>{{li.icon}}</mat-icon>
        <p mat-line>{{li.name}}</p>
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>

    <app-header (menuButtonClick)="sidenav.toggle()"></app-header>

    <ng-content select="[outlet]"></ng-content>

    <app-footer></app-footer>

  </mat-sidenav-content>
</mat-sidenav-container>   

谢谢你们。

我试图转到mat-paginator的第一页，即重置分页，但不起作用。知道如何解决吗？

我的 html 是这样的

<mat-paginator [length]="itemTotal" [pageIndex]="page" [pageSize]="itemPage" (page)="pageEvent = getPublicationFollowersData($event)">
    </mat-paginator>

打字稿：

   getPublicationFollowersData(event?: PageEvent) {
      this.getPublicationsUser(event.pageIndex);
}

我尝试使用以下方法初始化页面：

this.page = 1

但它不起作用。

它们可以在同一个文档页面上找到，但看起来是一样的。您知道从功能角度来看的区别吗？使用一个比另一个有什么好处？

https://material.angular.io/components/sidenav/overview

首先感谢阅读。

我正在使用Angular 13并创建一个myapp.mainrouting.js文件并尝试声明loadChildren如下：

import {CustomerAppHomeComponent} from "../Home/CustomerApp.HomeComponent";
import {Routes} from "@angular/router";    

export const MainRoutes: Routes  = [
  { path: 'Home', component: CustomerAppHomeComponent },
  { path: 'Supplier', loadChildren: '../Supplier/CustomerApp.SupplierModule#CustomerAppSupplierModule' },
  { path: '', component: CustomerAppHomeComponent },
]

但是，我收到以下错误：

error TS2322: Type 'string' is not assignable to type 'LoadChildrenCallback | undefined'.

8   { path: 'Supplier', loadChildren: '../Supplier/CustomerApp.SupplierModule#CustomerAppSupplierModule' },
                        ~~~~~~~~~~~~

  node_modules/@angular/router/router.d.ts:1998:5
    1998     loadChildren?: LoadChildren;
             ~~~~~~~~~~~~
    The expected type comes from property 'loadChildren' which is declared here on type …

升级到 Angular 15 后，我想使用旧组件以便之后进行持续迁移。然而，遗留组件并不具有所有样式，并且看起来格式错误。

我使用ng updateAngular 14 到 15 的迁移，并调整主题以使用文档中提到的新方式（https://material.angular.io/guide/theming）

我的输入目前看起来像这样

我正在使用自定义的角度材质主题

<mat-label>当我尝试在 simple 中使用元素时，我收到来自 Angular Material 的以下错误<mat-form-field>：

这是有问题的代码：

<mat-form-field color="accent">
  <mat-label>Year</mat-label>
  <mat-select [value]="stateService.currentYear.toString()"
              (valueChange)="onYearChange($event)">
    <mat-option *ngFor="let year of years"
                [value]="year">
      {{year}}
    </mat-option>
  </mat-select>
</mat-form-field>

这是渲染的组件：

该组件功能齐全，并且在选择和取消选择小部件时标签会正确增大和缩小。问题是我的开发者控制台中出现了这个错误，我想放弃它（看起来不太专业）。

我尝试分配一些 id，使用不同的语义，但到目前为止没有结果。

关于如何清除此错误有什么想法吗？

编辑（2023年12月31日）：我的chrome浏览器控制台也在官方选择文档中记录了此错误： https: //material.angular.io/components/select/overview

我记得在ng-conf的一个Angular 2演示中使用了angular-material.css.有人可以确认这是否有效......

此外,是否可以在Angular 2应用程序中使用以下内容:

• 角material.js
• 角animate.js
• 角aria.js

我知道上面的js依赖于Angular 1.3+,但如果我在Angular 2依赖项之上添加该依赖项会怎么样呢.这些会起作用吗？

我无法以任何方式使用Angular 5的角度/材质.我遵循了这个简单的教程,但每当我在组件HTML中插入一些材质标签时,网页就会变成空白.

Angular CLI在使用时不会显示任何问题 ng serve

依赖关系:

"dependencies": {
    "@angular/animations": "^5.0.5",
    "@angular/cdk": "^5.0.0-rc.2",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.0-rc.2",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.5.5",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0", …

我正在尝试实现一个移动风格的底部导航栏。为此，我使用了 mat-toolbar 并使用 css 将其固定在底部，如下所示：

组件.html：

<mat-toolbar class="toolbarNav">
    <mat-icon class="material-icons color_blue" (click)="getTopArtists('long_term' , 0 , 100)">
        star_border</mat-icon>
    <mat-icon class="material-icons color_blue" (click)="getTopTracks('long_term' , 0 , 100)">favorite_border
    </mat-icon>
    <mat-icon class="material-icons color_blue" (click)="recentlyPlayed()">history</mat-icon>
</mat-toolbar>

组件.css

.toolbarNav{  
    position: fixed;
    bottom: 0; 
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    padding: 2em;
    background-color: white;

  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
   box-shadow:        2px 2px 4px 5px …