标签: angular-material2

在我的Angular 2.0.0-rc.7+ Angular Material 2.0.0-alpha.8-1应用程序构建中Angular CLI 1.0.0-beta.11-webpack.9-1,从rc.5+ alpha.7-4(从1.0.0-beta.11-webpack.8NG CLI)升级后出现以下错误:

main.bundle.js:44545 Error: No provider for Overlay!
    at NoProviderError.Error (native)
    at NoProviderError.BaseError [as constructor] (http://localhost:4200/main.bundle.js:7032:34)
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:4200/main.bundle.js:44258:16)
    at new NoProviderError (http://localhost:4200/main.bundle.js:44289:16)
    at ReflectiveInjector_._throwOrNull (http://localhost:4200/main.bundle.js:65311:19)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/main.bundle.js:65339:25)
    at ReflectiveInjector_._getByKey (http://localhost:4200/main.bundle.js:65302:25)
    at ReflectiveInjector_.get (http://localhost:4200/main.bundle.js:65111:21)
    at NgModuleInjector.get (http://localhost:4200/main.bundle.js:45173:52)
    at ElementInjector.get (http://localhost:4200/main.bundle.js:65475:48)ErrorHandler.handleError @ main.bundle.js:44545
main.bundle.js:44548ERROR CONTEXT:ErrorHandler.handleError @ main.bundle.js:44548

我的package.json依赖是:

  "dependencies": {
    "@angular/common": "2.0.0-rc.7",
    "@angular/compiler": "2.0.0-rc.7",
    "@angular/core": "2.0.0-rc.7",
    "@angular/forms": "2.0.0-rc.7",
    "@angular/http": …

我知道这可能不是一个很好的问题.但我真的不知道该怎么办,我正在寻找原因.

我在本地运行我的自定义Angular 5 + Material 2应用程序mat-dialog并且mat-tab非常慢.我甚至试图关闭动画,但它仍然很慢.

此外,在编译生产时也会产生ng-build --prod非常慢的结果.

所以也许我对这个对话做错了.所以这是我的代码:

  openEditDialog(car:Car) {
    let dialogRef = this.dialog.open(EditDemandComponent);
    dialogRef.componentInstance.id = car.id;
    dialogRef.afterClosed().subscribe(result => {
      console.log('The edit dialog was closed');
    });
  }

我的构造函数:

  constructor(
    private httpClient: HttpClient, 
    private dialog: MatDialog, etc..

和对话框组件的构造函数:

constructor(public dialogRef: MatDialogRef<EditDemandComponent>, etc..

在对话框组件中我正在使用代码 this.dialogRef.close();

我真的没有选择,我真的没有得到它,因为材料2文档非常快,对我来说,本地一切都超级慢.由于动画不顺畅,因此速度很慢.至少需要2秒钟才能打开对话框或切换标签页.

这是我的版本:

  "dependencies": {
    "@angular/animations": "^5.0.2",
    "@angular/cdk": "^5.0.0-rc.1",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/flex-layout": "^2.0.0-beta.10-4905443",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.0-rc.1",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1", …

我使用Angular material@5.0.0-rc.2在mat-table中的每一行添加了EDIT,DELETE和DETAILS按钮.所有按钮都正常工作但是,*我收到错误"无法读取未定义的属性'模板'和*每按一次按钮,所有内容都显示在同一页面上

itemlist.component.html

<mat-table #table [dataSource]="dataSource">
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="description">
    <mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="actions">
    <mat-cell *matCellDef="let row">
      <button mat-button (click)="showDetails(row)">DETAILS</button>
      <button mat-button (click)="editItem(row)">EDIT</button>
      <button mat-button (click)="deleteItem(row)">DELETE</button>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns:displayedColumns"></mat-row>
</mat-table>

itemlist.component.ts

export class ItemListComponent {
  @Input() dataSource;
  displayedColumns = ['name', 'description', 'actions'];

  @Input() items: Item[];
  @Output() onEdit = new EventEmitter<Item>();
  @Output() onShow = new EventEmitter<Item>();
  @Output() onDelete …

我想在我的应用程序上添加Angular Material Paginator.

在模块中添加了MatPaginatorModule.

<mat-paginator #paginator 
               [length]="100" 
               [pageSize]="10" 
               [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

但它给出了一个错误:

未捕获错误:模板解析错误:

无法绑定到'length',因为它不是'mat-paginator'的已知属性.

1. 如果mat-paginator是Angular组件并且它有length输入,则验证它是否是此模块的一部分.
2. 如果mat-paginator是一个Web组件,然后添加CUSTOM_ELEMENTS_SCHEMA到@NgModule.schemas该组件来抑制此消息.

也许我错过了什么？

"@angular/animations": "^5.0.1",
"@angular/cdk": "^5.0.0-rc0",
"@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-rc0",

为什么这不起作用？我尝试导入角度网站上显示的MomentDateAdapter,但Visual Studio Code一直抱怨它无法找到@ angular/material-moment-adapter.我究竟做错了什么？

版本信息:Angular CLI:1.5.0节点:6.11.0操作系统:darwin x64 Angular:4.4.6 ...动画,通用,编译器,编译器 - cli,核心,表单... http,语言服务,平台 - 浏览器...平台 - 浏览器动态,路由器,tsc包裹

@ angular/cdk:2.0.0-beta.12 @ angular/cli:1.5.0 @ angular/material:2.0.0-beta.12 @ angular-devkit/build-optimizer:0.0.32 @ angular-devkit/core :0.0.20 @ angular-devkit/schematics:0.0.35 @ ngtools/json-schema:1.1.0 @ ngtools/webpack:1.8.0 @ schematics/angular:0.1.1 typescript:2.3.4 webpack:3.8.1

我在Angular 5应用程序中使用@ angular/material.我使用的Angular Material的版本是5.0.2.我正在使用@ angular/animations 5.1.2.

我有一个非常简单的滑块用例,如下所示:

<mat-slider style="width:100%;"></mat-slider>

但由于某种原因,拖动滑块手柄时,在释放鼠标之前它不会移动到新位置,这显然不是很好.我已经检查了Material demo并且按预期工作:滑块在鼠标移动时移动,并且在释放鼠标时不会跳转.

任何人都可以建议为什么会发生这种情况？工作中永远不会通过AC!

我在我的项目中使用角度材质,我使用Mat-Table为每个表渲染1000个产品/行.当表格改为分页(我们使用后端分页)到1000行时,性能变得非常慢,我甚至无法在文本框中写入.

我试图调试问题,所以我把日志放在一个列模板上,这样我就可以看到渲染是如何工作的.

即使我将鼠标悬停在表格标题上,我也看到它会重新呈现所有行.是否有可能将变更检测控制为ChangeDetectionStrategy.OnPush

我md-slider在组件中使用Angular Material v2

@Component({
  selector: 'ha-light',
  template: `<md-slider min="0" max="1000" step="1" 
             [(ngModel)]="myValue" (change)="onChange()"></md-slider>
             {{myValue}}`,
  styleUrls: ['./light.component.css']
})
export class LightComponent implements OnInit {
  myValue = 500;

  constructor() { }

  ngOnInit() { }

  onChange(){
    console.log(this.myValue);
  }
}

并且myValue只是onChange当我停止滑动并释放鼠标按钮时,才会调用更新和方法.

有没有办法进行myValue更新,并且还有一个函数调用,因为我正在滑动滑块？

我注意到aria-valuenow属性正在改变,因为我正在滑动,但我不太确定如何使用它来满足我的需要(如果可以使用的话).

我在使用DataSource进行Material Pagination时遇到了麻烦.我需要从服务中返回REST服务提供的整理项目(我无法更改).到目前为止,我能做到的唯一方法是两次做同样的请求,这是不对的.

如果查看"servers-collection.component.ts",我只需调用"getServiceData"来获取分页的总项目(请求响应中的"total_items").我正在寻找的是直接从主要请求获取数据.

这是我的原始响应(GET):

{
    "_links": {
        "self": {
            "href": "https://{URL}/servers?page=1"
        },
        "first": {
            "href": "http://{URL}/servers"
        },
        "last": {
            "href": "http://{URL}/servers?page=100"
        },
        "next": {
            "href": "http://{URL}/servers?page=2"
        }
    },
    "_embedded": {
        "servers": [
            {
                "id": 1,
                "name": "Server Name",
                "ipAddress": "111.222.333.444",
                "hostName": "server.hostname.com",
                "_links": {
                    "self": {
                        "href": "http://{URL}/servers/1"
                    }
                }
            }
        ]
    },
    "page_count": 100,
    "page_size": 5,
    "total_items": 498,
    "page": 1
}

......这就是我做的事情:

服务器 - collection.component.html

<div class="example-container mat-elevation-z8">
    <mat-table #table [dataSource]="dataSource">
        <!-- ID Column -->
        <ng-container matColumnDef="id">
            <mat-header-cell *matHeaderCellDef> …

我正在使用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, …