标签: angular-cdk

寻找一种能够使垫对话框既可拖动又可调整大小的方法。到目前为止，我已经使用 cdkDrag (DragDropModule) 完成了可拖动部分。我尝试过使用调整大小：展位；在 css 中，但它似乎与可拖动功能结合使用效果不佳。即，如果我删除 cdk，则可调整大小，反之亦然。

请参阅此处的代码：https ://stackblitz.com/edit/angular-vp8xt7

使用cdkScrollable我遇到了错误或我的理解问题：

我已经实现了一个，并且正在 -Method中DataSource订阅 collectionViewer 的事件。正如本例中所做的那样。viewChangeconnect

现在在我的代码中，该viewChange事件永远不会被触发 - 因此数据源永远不会加载。我需要 viewChange 事件，因为只有这个事件才能告诉我range应该加载哪个（或页面）数据。

经过对 github 的一些研究，我发现，在_updateRenderedRange（代码）中，它检查我的数据源返回的数组的长度（当我等待事件触发时，它还没有返回任何内容）。

该示例之所以有效，是因为它初始化了一个长度为 100000 的数组。我不明白 和dataLength滚动策略之间的联系。在我看来，结果数据数组的大小在计算范围时应该没有区别...我认为范围是通过可滚动元素的大小和渲染项目的大小来计算的。也许还有一个参数告诉视口总共有多少个项目，以便它可以绘制正确的滚动条（就像数据表中的分页器知道有多少页）。但为此，您不需要初始化包含那么多项目的数组。

我在这里缺少什么？

我有一个示例应用程序，我使用cdk-Dragging. 问题是当我拖动它时，cdk-drag-preview正在应用一个名为的类并使拖动的行变小。

在上面您可以看到，当我尝试拖动时，拖动的行会变得越来越小，直到我将其放下。我希望它和其他的一样大，永远不会改变。我尝试向此类添加属性，但无法使其工作。我怎样才能保持这一行的宽度？

这是我在 stackblitz 上尝试过的：

https://stackblitz.com/edit/angular-gbls7d-or2y5z?file=src/app/cdk-drag-drop-connected-sorting-example.html

我正在使用 cdk-virtual-scroll-viewport 在用户滚动时一次动态渲染一小组项目。

无论为 cdk-virtual-scroll-viewport 元素指定的高度如何，视口仅显示 5 个项目。

在该组件中，我加载了一个包含 100 个字符串的数组。

每个项目的高度为 48px。视口高度设置为 480px。因此，我预计一次会看到 10 个项目。它只渲染 5。

在 HTML 中：

                <cdk-virtual-scroll-viewport itemSize="48" class="viewport">
                    <mat-option *cdkVirtualFor="let person of filteredPersons"
                        [value]="person" class="animated slideInRight">
                        <div class="option-user">
                            <img class="image-cropper"
                                src="......"
                                alt="User Picture" />
                            {{person}}
                        </div>
                    </mat-option>
               </cdk-virtual-scroll-viewport>

在CSS中：

.viewport {
    height: 480px; 
}

.option-user {
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

SelectionModel我希望能在Angular CDK 文档中找到一些相关内容，但始终未能找到。

API页面很多；例如，MatTable 的 Angular Components 文档。是的，代码SelectionModel位于GitHub上，但我想：

1. 阅读概述”，就像 **angular.io* 上的许多此类页面一样，同时还
2. 从angular.io或第三方的示例中学习，以及
3. 阅读代码。

我似乎缺少的是#1，但仅限于某些课程。

其他一些非组件类记录在angular.io中。 MatTableDataSource可以在MatTable API 文档 的右侧栏中找到。好吧，这并不明显，但它是一个有用的位置。我可能期望在CDK Collections page之类的地方找到集合，但可惜它不在那里。

1. angular.io是此类内容的官方位置吗？
2. 我是否错过了查找SelectionModel 课程 API 文档以及其他课程的API 文档的方法cdk\collection，或者我真的只是报告网站错误？

由于 Protractor 已被弃用，我刚刚开始使用 WebdriverIO。

之前我们使用 Angular 的 Component Harness 进行测试。当我们尝试迁移现有测试时，我们发现 Angular 团队实现了“@angular/cdk/testing/selenium-webdriver”作为 Protractor-harness 环境的替代品。

当我将 WebdriverIO 浏览器的对象传递给 SeleniumWebDriverHarnessEnvironment 时，我现在遇到了拦截器。有人可以帮助我找到解决方案吗？

import { SeleniumWebDriverHarnessEnvironment } from "@angular/cdk/testing/selenium-webdriver";
const harnessLoader: HarnessLoader = SeleniumWebDriverHarnessEnvironment.loader(driver);

我收到错误如下

'TypeError: root(...).findElements is not a function'.
at .\src\cdk\testing\selenium-webdriver\selenium-web-driver-harness-environment.ts:43:14

我安装了 @Angular/Material 和 @Angular/cdk 来创建模态叠加。但是，当我在 app.module.ts 中导入 OverlayModule 时，它​​给出了以下错误：

Error: ./node_modules/@angular/cdk/fesm2015/overlay.mjs 3222:40-54\nCan't import the named export 'ApplicationRef' from non EcmaScript module (only default export is available)\n\nError: ./node_modules/@angular/cdk/fesm2015/overlay.mjs 3240:11-38\nCan't import the named export 'ComponentFactoryResolver' from non EcmaScript module (only default export is available)\n\nError: ./node_modules/@angular/cdk/fesm2015/overlay.mjs 3280:12-39\nCan't import the named export 'ComponentFactoryResolver' from non EcmaScript module (only default export is available)\n\nError: ./node_modules/@angular/cdk/fesm2015/overlay.mjs 410:11-19\nCan't import the named export 'DOCUMENT' from non EcmaScript module (only default export is available)\n\nError: ./node_modules/@angular/cdk/fesm2015/overlay.mjs 443:15-23\nCan't import the named …

我尝试使用在Angular CDK: How to set Inputs in a ComponentPortal 中找到的方法 ，但PortalInjector似乎已被弃用，并且没有关于在其位置做什么的实际说明。弃用警告指出“Injector.create改为使用”。但不知道如何使用它、在哪里使用它或者它实际上取代了什么。

我也尝试过研究Material 自己的 Dialog 组件，看看我是否能弄清楚他们是如何做到的，但一无所获。

所以我再次对 Angular 13 提出问题：

How can I pass data into and out of a component that was created using a ComponentPortal()? If the answer is something generic such as using an Injector, can you please point me to an example or documentation on how to do so? A 'hello world' of passing Injectors?

我在我的应用程序中使用了Angular Material,我有两个mat-table在单个组件上进行排序但我的排序只在第一个表上工作

这是ts代码

@ViewChild(MatSort) inventoryDataSort: MatSort;
@ViewChild(MatPaginator) inventoryDataPaginator: MatPaginator;

@ViewChild(MatSort) additionalDataSort: MatSort;
@ViewChild(MatPaginator) additionalDataPaginator: MatPaginator;
ngAfterViewInit() {
    this.inventoryDataSource.sort = this.inventoryDataSort;
    this.inventoryDataSource.paginator = this.inventoryDataPaginator;
    this.additionalDataSource.sort = this.additionalDataSort;
    this.additionalDataSource.paginator = this.additionalDataPaginator;
}

垫表

<mat-table #table1 [dataSource]="inventoryDataSource" matSort>
<mat-table #table2 [dataSource]="additionalDataSource" matSort>

如何从输入字段手动将新行添加到角度材质表中.

请看这个图像,如果我添加一个状态名称和状态代码,它应该出现在下表中,请帮助我如何使用angular4实现它