标签: angular-material

我正在开发一个Angular项目,其中我使用了Angular Material组件(主要是md-Buttons).该应用程序显示了各种瓷砖,每个瓷砖都是md-Button.一次我最多可能有20到30个瓷砖.使用这些瓷砖重复ng-repeat.

该应用程序在Chrome上运行良好,但在IE11上,我经常面临渲染问题.渲染大约需要5-6秒.切换瓷砖显示效果不佳.滚动屏幕会导致组件粘住,然后在1秒后移动.

可能我认为Angular Material对于IE11来说太重了.我可以做些什么来加快IE11的速度,因为这是我的主要目标浏览器？

我试过了:

1. 更新Angular库.
2. 使用MS052补丁
3. 从Angular Material css中删除一些过渡.

上述情况似乎都没有太大影响.

我认为Angular材料是一个很好的库,必须有一些东西可以用来改进它在IE11中的工作.请有人建议一些有效的方法吗？

在MdDialog的md-dialog-actions块中,是否可以对齐左边的按钮,而右边有两个按钮？

这里有一个plnkr的一些东西,我想要做的事.比如说,在第一个模态中,如何分离是和否按钮？(参见common-model.component.ts文件)(这个plnkr还有其他一些问题,我还在研究它.但它不涉及这个问题.)

import { Component }   from '@angular/core';
import { MdDialogRef } from "@angular/material";

@Component({
    selector: 'common-modal',
    template: `
      <h2 md-dialog-title id="modal-title">{{ title }}</h2>
      <md-dialog-content>
        <p class="dialog-body" id="modal-message">{{ message }}</p>
      </md-dialog-content>
      <md-dialog-actions align="right">
        <button md-raised-button 
                md-dialog-close 
                id="modal-close-btn">
          {{ buttonOptions.closeText }}
        </button>
        <button md-raised-button 
                *ngIf="buttonOptions.enableNext" 
                id="modal-next-button"
                (click)="dialogRef.close(true)">
          {{ buttonOptions?.nextText }}
        </button>
      </md-dialog-actions>`,
})
export class CommonModalComponent {
    /**
     * {string} The text for the header or title of the dialog.
     */
    title: string;
    /**
     * {string} The text for …

我有以下组件创建一个MdDialog

export class SideNavsComponent implements OnInit, AfterViewInit, OnDestroy {
  eventDispatcher: EventDispatcher
  authEmailDialogRef: MdDialogRef<AuthEmailDialogComponent>

  constructor(public dialog: MdDialog,) {
    this.eventDispatcher = new EventDispatcher()
  }

  signIn( event ): void {
    this.isSignedIn = event.checked
    this.openDialog()
  }

  openDialog() {
    this.authEmailDialogRef = this.dialog.open( AuthEmailDialogComponent, {
      height: '500px',
      width: '300px',
      disableClose: true
    } )
  }

  ngOnDestroy() {
  }

  ngAfterViewInit() {
  }

  ngOnInit() {
    event_dispatcher.on( 'CLOSE authEmailDialogRef', ( target: Object ) => {
      this.authEmailDialogRef.close()
    } )
  }
}

下面的组件创建一个按钮,单击该按钮时,通过发送和在SideNavsComponent#ngOnInit方法中截获的事件来关闭上面创建的MdDialog

export class AuthEmailDialogComponent implements OnInit {
eventDispatcher: EventDispatcher = …

我有一张表格正在填写add client表格.它工作正常,并显示更改.问题是我有一个选择列表,用户在其中选择特定的源,然后将其保存在ngmodel中.这是代码.

选择列表

 <mat-select [(ngModel)]="model.source" name="source" placeholder="Select Source ">
      <mat-option [value]="1 ">Upwork</mat-option>
      <mat-option [value]="2 ">Refer from Friend</mat-option>
      <mat-option [value]="3 ">Other</mat-option>
    </mat-select>

现在在我的表中,显示的值基于选择显示为1或2或3.我想写一些东西,这样的插值条件.

表场

<ng-container matColumnDef="source">
  <mat-header-cell *matHeaderCellDef> Source </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.source ? if value is 1 : display (upwork), if value is 2 : display(refer from friend)}} </mat-cell>
</ng-container>

有点像这样,我确实喜欢它,angularjs我不确定Angular

我一直在关注如何创建自定义主题的角度/材料文档,跟随其他博客,并检查各种堆栈溢出类似的问题,但似乎无法使这工作.我有以下styles.css,angular-cli.json,theme.scss和另一个sass文件,其中我的主题颜色来自super-styles.sass.

styles.css的

...
@import 'assets/styles/theme.scss';
...

角cli.json

...
"styles": [
   "styles.css",
    "src/assets/styles/theme.scss"
],
...

theme.scss

@import '~@angular/material/theming';
@import "super-styles";

// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core()

// Define the palettes for your theme using the …

如何将数据表组件的组件固定在顶部,并将Paginator固定在底部？

这是我的HTML:

<div class="example-container mat-elevation-z8">

    <table mat-table #itemsTable [dataSource]="dataSource" class="items-list">

        <ng-container matColumnDef="position">
            <th mat-header-cell *matHeaderCellDef> No. </th>
            <td mat-cell *matCellDef="let element"> {{element.position}} </td>
        </ng-container>

        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef> Name </th>
            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
        </ng-container>

        <ng-container matColumnDef="weight">
            <th mat-header-cell *matHeaderCellDef> Weight </th>
            <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
        </ng-container>

        <ng-container matColumnDef="symbol">
            <th mat-header-cell *matHeaderCellDef> Symbol </th>
            <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="this.componentsDataService.displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: this.componentsDataService.displayedColumns;" (click)="onRowClicked(row)"></tr>
    </table>

    <mat-paginator [pageSizeOptions]="[50, 100, …

我想自定义 mat-paginator 。默认情况下，我得到这样的分页器，它在下面的链接https://material.angular.io/components/paginator/overview 中给出 。但我想要如下图所示的分页。我如何使用mat-paginator做到这一点