问题标签 [angular-cdk]

我目前正在研究一个使用材料 2 表来显示一些数据的组件。我需要能够编写自定义过滤器操作（例如价格> 1）并组合多个过滤器。为了完成这项工作，我编写了一个自定义 filterPredicate：

谓词类型的接口：

customFilterPredicate 循环遍历作为参数传递的所有过滤器，如果所有条件都满足则返回 true，如果一个或多个不满足则返回 false。

现在我使用此函数通过服务获取表的数据，设置我的 dataSource 并替换 dataSource 的 filterPredicate：

有趣的是，当我使用它时过滤器会起作用，但它总是抛出一个错误，说我不能用我的自定义过滤器替换过滤器谓词，因为它期望过滤器参数是一个字符串。

所以我的问题是，如何在不重写材料2包中的函数的情况下用我的this.dataSource.filterPredicate替换。有没有办法在打字稿中做到这一点？

如果有人知道为什么会这样，尽管抛出错误，那会很有趣，哈哈

在将 AngularBreakpointObserver与 结合使用时，我尝试使用 Material Design-spec 断点（例如，Angular Material它们在 中定义）。BreakpointsBreakpoints.LandscapePortraitBreakpoints.HandsetPortrait

breakpointObserver 工作，除了当我新加载页面。breakpointObserver 仅在观察到更改后触发，但考虑到它是新负载，因此还没有更改。这意味着尚未根据断点评估初始视口。我试过使用 single BreakpointObserver.isMatchedin OnInit，但这似乎没有任何效果。

我将BreakpointObserver,Breakpoints和包含MediaMatcher到一个共享服务中，我订阅了所有需要“监听”断点的组件。

我的问题是：如何确保在第一次视口更改之前评估断点（如果用户不调整窗口大小/更改设备方向，这可能根本不会发生）？

这是我的代码shared.service.ts：

如何从输入字段手动将新行添加到 Angular Material 表中。

请看这张图片，如果我添加一个状态名称和状态代码，它应该出现在下表中，请帮助我如何使用 Angular 4 实现它。

我使用 cdk 的 Overlay 在单击按钮时显示一些内容。除了垂直滚动机制外，一切都按预期工作。

当我降低浏览器的高度时，覆盖层内的内容会获得垂直滚动条。Given max-height: 600pxand height: 600pxto both panelClassand content too。但仍然是相同的行为。

试图查看 angular-material 对话框代码，但无法理解如何实现滚动。

由于缺乏明确的文件，Overlay.scrollStrategies我不清楚是否必须朝这个方向看。

下面是代码摘录，我用它来制作叠加层。

我有以下 JSON：

我已经验证它是 json 格式，并且我有以下模型来表示它：

}

json 的服务按预期工作，但是当我尝试在这样的表中显示 json 时：

我试图在互联网上将它显示为带有一些指南的表格，但无法成功，它总是显示一个空表格，你知道可能是什么问题吗？

编辑：这是组件的 ts 文件：

这是服务：

我正在使用 Angular Material Design 表构建几个表。我设法从 json 文件中获取数据并填充表。但是 JSON 文件有一些列表 []，我无法从 html 访问这些列表。

这是我的服务中从 JSON 文件获取数据的代码：

}

这是组件中的数据源：

这就是我在 html 文件中构建表格的方式：

这是 JSON 文件的一部分，您可以看到收据在一个数组中，这就是为什么无法使用 receivedDate 访问的原因

使用 html 文件中的 mat-cell 标记的receipt.receipts.receivedDate。

{“companyName”：“Acme”，“documentType”：“标准”，“receipts”：[{“receivedDate”：“2018-04-26T09:05:53.566Z”，

我想这可能是我应该在服务中做的事情，以从数据中访问内容以使其在组件 DataSource 中可用，但我还没有弄清楚是什么。

任何建议表示赞赏。

Angular Material CDK 库提供了包括覆盖在内的各种功能。我能找到的所有示例都显示了如何在叠加层之上显示新组件。我的目标有点不同。我想在叠加层顶部显示一个现有组件（屏幕上的几个组件之一）。

我想到的行为是，当用户在特定对象上进入某种编辑模式时，表示该对象的组件会在覆盖层之上“浮动”，直到编辑完成或取消。

有没有直接的方法可以做到这一点？该cdkConnectedOverlay指令似乎很有用，但我不知道如何使其工作。

我正在尝试使用角度材料库。我在 package.json 中添加了 @angular/material 的依赖项，如下所示

当我使用

它在编译时抛出错误

除了导入行之外，我没有添加任何与角度材料相关的代码。

我在我的项目中使用有角度的材料，并且我使用 Mat-Table 来渲染每张表 1000 个产品/行。当将表的分页（我们使用后端分页）更改为 1000 行时，性能变得非常慢，我什至无法在文本框中写入。

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

即使我将鼠标悬停在表格标题上，我也看到它是重新渲染所有行。是否有可能将更改检测控制为像 ChangeDetectionStrategy.OnPush

移动设备上有一个错误（我猜），当您单击侧导航菜单然后选择要前往的路线时，它会关闭侧导航但使菜单按钮处于焦点状态。也会发生在打开模式的按钮上，或者实际上是任何具有焦点状态的按钮（侧面导航、导航项目、按钮等等..）

您可以在 angular material side nav 示例中看到它（模拟移动设备）： https ://stackblitz.com/angular/brrokxxmqvrn?file=app%2Fsidenav-autosize-example.ts

或者你可以看下面的截图（我点击后切换sidenav按钮是焦点）

我想知道如何在角度 5 上禁用移动设备（或在某些条件下）的 cdk 焦点状态