angular使用material,cdk遇到的问题

背景

angular项目中添加使用 material,cdk两个包的时候,编译不通过,报了一大堆错误。

主要是这个:An accessor cannot be declared in an ambient context.

完成错误代码
ERROR in node_modules/@angular/cdk/bidi/dir.d.ts:26:9 - error TS1086: An accessor cannot be declared in an ambient context.

26     get dir(): Direction;
           ~~~
node_modules/@angular/cdk/bidi/dir.d.ts:27:9 - error TS1086: An accessor cannot be declared in an ambient context.

27     set dir(value: Direction);
           ~~~
node_modules/@angular/cdk/bidi/dir.d.ts:29:9 - error TS1086: An accessor cannot be declared in an ambient context.

29     get value(): Direction;
           ~~~~~
node_modules/@angular/cdk/collections/selection-model.d.ts:24:9 - error TS1086: An accessor cannot be declared 
in an ambient context.

24     get selected(): T[];
           ~~~~~~~~
node_modules/@angular/cdk/drag-drop/directives/drag-handle.d.ts:25:9 - error TS1086: An accessor cannot be declared in an ambient context.

25     get disabled(): boolean;
           ~~~~~~~~
node_modules/@angular/cdk/drag-drop/directives/drag-handle.d.ts:26:9 - error TS1086: An accessor cannot be declared in an ambient context.

26     set disabled(value: boolean);
           ~~~~~~~~
node_modules/@angular/cdk/drag-drop/directives/drag-preview.d.ts:25:9 - error TS1086: An accessor cannot be declared in an ambient context.

25     get matchSize(): boolean;
           ~~~~~~~~~
node_modules/@angular/cdk/drag-drop/directives/drag-preview.d.ts:26:9 - error TS1086: An accessor cannot be declared in an ambient context.

26     set matchSize(value: boolean);
           ~~~~~~~~~
node_modules/@angular/cdk/drag-drop/directives/drag.d.ts:72:9 - error TS1086: An accessor cannot be declared in an ambient context.

72     get disabled(): boolean;
           ~~~~~~~~
node_modules/@angular/cdk/drag-drop/directives/drag.d.ts:73:9 - error TS1086: An accessor cannot be declared in an ambient context.

73     set disabled(value: boolean);
           ~~~~~~~~
node_modules/@angular/cdk/drag-drop/directives/drop-list-group.d.ts:26:9 - error TS1086: An accessor cannot be 
declared in an ambient context.

26     get disabled(): boolean;
           ~~~~~~~~
node_modules/@angular/cdk/drag-drop/directives/drop-list-group.d.ts:27:9 - error TS1086: An accessor cannot be 
declared in an ambient context.

27     set disabled(value: boolean);
           ~~~~~~~~
node_modules/@angular/cdk/drag-drop/directives/drop-list.d.ts:69:9 - error TS1086: An accessor cannot be declared in an ambient context.

69     get disabled(): boolean;
           ~~~~~~~~
node_modules/@angular/cdk/drag-drop/directives/drop-list.d.ts:70:9 - error TS1086: An accessor cannot be declared in an ambient context.

70     set disabled(value: boolean);
           ~~~~~~~~
node_modules/@angular/cdk/drag-drop/drag-ref.d.ts:172:9 - error TS1086: An accessor cannot be declared in an ambient context.

172     get disabled(): boolean;
            ~~~~~~~~
node_modules/@angular/cdk/drag-drop/drag-ref.d.ts:173:9 - error TS1086: An accessor cannot be declared in an ambient context.

173     set disabled(value: boolean);
            ~~~~~~~~
node_modules/@angular/cdk/scrolling/fixed-size-virtual-scroll.d.ts:75:9 - error TS1086: An accessor cannot be declared in an ambient context.

75     get itemSize(): number;
           ~~~~~~~~
node_modules/@angular/cdk/scrolling/fixed-size-virtual-scroll.d.ts:76:9 - error TS1086: An accessor cannot be declared in an ambient context.

76     set itemSize(value: number);
           ~~~~~~~~
node_modules/@angular/cdk/scrolling/fixed-size-virtual-scroll.d.ts:82:9 - error TS1086: An accessor cannot be declared in an ambient context.

82     get minBufferPx(): number;
           ~~~~~~~~~~~
node_modules/@angular/cdk/scrolling/fixed-size-virtual-scroll.d.ts:83:9 - error TS1086: An accessor cannot be declared in an ambient context.

83     set minBufferPx(value: number);
           ~~~~~~~~~~~
node_modules/@angular/cdk/scrolling/fixed-size-virtual-scroll.d.ts:88:9 - error TS1086: An accessor cannot be declared in an ambient context.

88     get maxBufferPx(): number;
           ~~~~~~~~~~~
node_modules/@angular/cdk/scrolling/fixed-size-virtual-scroll.d.ts:89:9 - error TS1086: An accessor cannot be declared in an ambient context.

89     set maxBufferPx(value: number);
           ~~~~~~~~~~~
node_modules/@angular/cdk/scrolling/virtual-for-of.d.ts:53:9 - error TS1086: An accessor cannot be declared in 
an ambient context.

53     get cdkVirtualForOf(): DataSource<T> | Observable<T[]> | NgIterable<T> | null | undefined;
           ~~~~~~~~~~~~~~~
node_modules/@angular/cdk/scrolling/virtual-for-of.d.ts:54:9 - error TS1086: An accessor cannot be declared in 
an ambient context.

54     set cdkVirtualForOf(value: DataSource<T> | Observable<T[]> | NgIterable<T> | null | undefined);
           ~~~~~~~~~~~~~~~
node_modules/@angular/cdk/scrolling/virtual-for-of.d.ts:60:9 - error TS1086: An accessor cannot be declared in 
an ambient context.

60     get cdkVirtualForTrackBy(): TrackByFunction<T> | undefined;
           ~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/scrolling/virtual-for-of.d.ts:61:9 - error TS1086: An accessor cannot be declared in 
an ambient context.

61     set cdkVirtualForTrackBy(fn: TrackByFunction<T> | undefined);
           ~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/scrolling/virtual-for-of.d.ts:64:9 - error TS1086: An accessor cannot be declared in 
an ambient context.

64     set cdkVirtualForTemplate(value: TemplateRef<CdkVirtualForOfContext<T>>);
           ~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/scrolling/virtual-for-of.d.ts:69:9 - error TS1086: An accessor cannot be declared in 
an ambient context.

解决

原因: angular版本号 与 material cdk 版本号不匹配。

从官网可以看出有很多个版本。默认安装material,cdk的时候如果未指明版本号,会安装最新的。但是我自己的angular版本没用最新的还是8.3.8.所以才导致上面的报错。
在这里插入图片描述

最后只需要修改package.json中 material,cdk版本号,重新npm install 一下就能解决了。
(我的angular8.* 所以用的 material,cdk版本 8.2.3)
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 Angular 完成一个树状结构表格,可以使用 Angular Material 中的 `mat-table` 和 `mat-tree` 组件。下面是一个简单的示例: 1. 首先,要安装 Angular Material 和其它必要的依赖项。可以使用以下命令: ``` npm install @angular/material @angular/cdk @angular/animations ``` 2. 在模块中导入 `MatTableModule` 和 `MatTreeModule`: ```typescript import { NgModule } from '@angular/core'; import { MatTableModule } from '@angular/material/table'; import { MatTreeModule } from '@angular/material/tree'; @NgModule({ imports: [MatTableModule, MatTreeModule], exports: [MatTableModule, MatTreeModule], }) export class MyMaterialModule {} ``` 3. 在组件中定义数据源和列定义: ```typescript import { Component } from '@angular/core'; interface FoodNode { name: string; children?: FoodNode[]; } const TREE_DATA: FoodNode[] = [ { name: 'Fruit', children: [ { name: 'Apple' }, { name: 'Banana' }, { name: 'Fruit loops' }, ], }, { name: 'Vegetables', children: [ { name: 'Green', children: [ { name: 'Broccoli' }, { name: 'Brussels sprouts' }, ], }, { name: 'Orange', children: [ { name: 'Pumpkins' }, { name: 'Carrots' }, ], }, ], }, ]; @Component({ selector: 'app-tree-table', template: ` <mat-table [dataSource]="dataSource" matTree> <ng-container matColumnDef="name"> <mat-cell *matCellDef="let node"> <button mat-icon-button [attr.aria-label]="node.name"> <mat-icon>{{ node.children ? 'expand_more' : 'crop_square' }}</mat-icon> </button> {{ node.name }} </mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle> <mat-row [ngClass]="{ 'example-tree-invisible': !node.expanded }"> <mat-cell *matCellDef="let node">{{ node.name }}</mat-cell> </mat-row> </mat-tree-node> <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row> </mat-table> `, styles: [ ` .example-tree-invisible { display: none; } `, ], }) export class TreeTableComponent { displayedColumns = ['name']; dataSource = TREE_DATA; hasChild = (_: number, node: FoodNode) => !!node.children && node.children.length > 0; } ``` 在上面的示例中,我们定义了一个 `FoodNode` 接口,其中包含节点的名称和子节点。然后,我们定义了一个名为 `TREE_DATA` 的树形数据源,其中包含了 `FoodNode` 对象的数组。接下来,我们在组件中定义了一个 `displayedColumns` 数组,它只包含了一个名为 `name` 的列。然后,我们在 `dataSource` 属性中设置了我们的数据源。最后,我们定义了一个名为 `hasChild` 的方法,用于检查节点是否有子节点。 4. 在模板中使用 `mat-table` 和 `mat-tree`: ```html <table mat-table [dataSource]="dataSource" matTree> <!-- 行定义 --> </table> ``` 在上面的示例中,我们将 `mat-table` 组件的 `matTree` 属性设置为 `true`,以指示我们要使用树形表格。 这是一个简单的树状结构表格的示例,你可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值