标签: angular-cdk
什么是Angular Material 2组件中的`cdk`
在角度材质源中的多个位置,有元素/ css类cdk作为其前缀.
有谁知道cdk角度材料上下文中的缩写？
推荐指数
解决办法
查看次数
Angular CDK:如何在ComponentPortal中设置输入
我想从材料CDK 使用新的Portal在表单的多个部分中注入动态内容.
我有一个复杂的表单结构,目标是有一个表单,指定子组件可以(或不)注入模板的多个位置.
也许CDK门户网站不是最好的解决方案？
我试了一下,但我确定这不是做的事情:https: //stackblitz.com/edit/angular-yuz1kg
我也尝试过,new ComponentPortal(MyPortalComponent)但我们如何设置输入呢？通常是这样的componentRef.component.instance.myInput
推荐指数
解决办法
查看次数
Angular CDK 拖放：不要移动源项目
我正在尝试实现一个编辑器，可以在其中拖动项目以将其添加到主要内容中，问题是当我拖出源项目容器时，源项目总是被破坏。
有没有办法强制源项目保持原样，同时仍然可以拖放项目？基本上，我想要一个复制行为而不是移动行为。
我已经看到了与我想要实现的基本目标相对应的其他问题，但它们都没有真正帮助我，因为问题更多地是关于如何在技术上完成复制项目的同时我想知道我如何实现这种行为在 UI 中，因为查看项目是否刚刚消失非常令人困惑。
推荐指数
解决办法
查看次数
在Angular Material 2表中使用虚拟滚动,使用@ angular/cdk-experimental
我有一个表显示这么多行,我想优化它的性能.我通过使用虚拟滚动技术找到了解决方案.下面是一个Angular Material CDK Vritual Scroll视口组件的示例,div我发现它很简单:
<cdk-virtual-scroll-viewport class="list-container lg" [itemSize]="52.5">
<div *cdkVirtualFor="let state of statesObservable | async;" class="list-group-item">
<div class="state">{{state.name}}</div>
<div class="capital">{{state.capital}}</div>
</div>
</cdk-virtual-scroll-viewport>
但是,我想将它与Angular Material Table集成,如下所示
<table mat-table [dataSource]="dataSource">
<ng-container *ngFor="let c of displayedColumns" [matColumnDef]="c">
<th mat-header-cell *matHeaderCellDef>{{getTitle(c)}}</th>
<td mat-cell style="white-space: pre-wrap;" *matCellDef="let element"> {{element[c]}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
我不知道如何来包装cdk-virtual-scroll-viewport到mat-table.我的表最多显示1000行和20多列,并且在加载和滚动时性能非常慢.
PS:我知道它可以通过使用Paginator解决,但我不想那样做.
版本
"@angular/material": "^6.2.0"@angular/cdk": "^6.2.0"@angular/cdk-experimental": "^6.2.1""@angular/core": "6.0.3""@angular/cli": …
推荐指数
解决办法
查看次数
Angular 6 MatTable性能1000行.
我在我的项目中使用角度材质,我使用Mat-Table为每个表渲染1000个产品/行.当表格改为分页(我们使用后端分页)到1000行时,性能变得非常慢,我甚至无法在文本框中写入.
我试图调试问题,所以我把日志放在一个列模板上,这样我就可以看到渲染是如何工作的.
即使我将鼠标悬停在表格标题上,我也看到它会重新呈现所有行.是否有可能将变更检测控制为ChangeDetectionStrategy.OnPush
推荐指数
解决办法
查看次数
如何在两个组件之间使用Angular7(角度材质)拖放
最近角度引入角度材料的拖放 https://material.angular.io/cdk/drag-drop/overview.
所有示例都在单个组件中描述.如何在两个不同的组件中使用它,拖动一个组件项并放入另一个组件.
推荐指数
解决办法
查看次数
如何在Angular 7.1中实现全局加载器
我有一个全局加载器,实现如下:
CoreModule:
router.events.pipe(
filter(x => x instanceof NavigationStart)
).subscribe(() => loaderService.show());
router.events.pipe(
filter(x => x instanceof NavigationEnd || x instanceof NavigationCancel || x instanceof NavigationError)
).subscribe(() => loaderService.hide());
LoaderService:
@Injectable({
providedIn: 'root'
})
export class LoaderService {
overlayRef: OverlayRef;
componentFactory: ComponentFactory<LoaderComponent>;
componentPortal: ComponentPortal<LoaderComponent>;
componentRef: ComponentRef<LoaderComponent>;
constructor(
private overlay: Overlay,
private componentFactoryResolver: ComponentFactoryResolver
) {
this.overlayRef = this.overlay.create(
{
hasBackdrop: true,
positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically()
}
);
this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(LoaderComponent);
this.componentPortal = new ComponentPortal(this.componentFactory.componentType);
}
show(message?: string) {
this.componentRef = this.overlayRef.attach<LoaderComponent>(this.componentPortal);
this.componentRef.instance.message = …推荐指数
解决办法
查看次数
角度嵌套拖放 / CDK 材质 cdkDropListGroup cdkDropList 嵌套
我使用 CDK Material Drag and Drop 实用程序创建一个启用拖放功能的表单编辑器。
它工作正常，但cdkDropList在 a 中嵌套 acdkDropListGroup不起作用。我无法将任何内容拖到嵌套的下拉列表容器中。
<div class="container">
<div class="row" cdkDropListGroup>
<div class="col-2">
<div id="toolbox" cdkDropList>
...
</div>
</div>
<div class="col-10">
<div id="formContainer" cdkDropList>
...
<div class="row">
<div class="col-md-6" cdkDropList>
... column 1 content
</div>
<div class="col-md-6" cdkDropList>
... column 1 content
</div>
</div>
</div>
</div>
</div>
</div>
推荐指数
解决办法
查看次数
Http和DataSource的材料2分页
我在使用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中的自定义过滤器
我正在使用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, …推荐指数
解决办法
查看次数