问题标签 [angular-material-7]

我有一个主题列表，每个主题都有一个颜色列表。我用一个打开 Angular 对话框的按钮显示所有主题，在对话框中我列出了该主题的所有颜色，这些颜色可以重新排序@angular/cdk/drag-drop。

如果我有一个只有 2-4 个主题的列表。我可以毫无问题地重新排序每个主题的所有颜色。但如果我有一个包含 20-30 个主题的列表。只有第一个主题可以正常工作，我可以打开对话框并重新排序项目，但如果我选择了最后一个项目，拖放不起作用。

我尝试调试错误，发现在重新排序不起作用时，前一个索引和当前索引具有相同的值。对于那些工作，正确的索引是正确的。

我在StackBlitz上构建了一个简单的应用程序，我可以在其中重现我遇到的问题。您可以尝试单击列表第一项的编辑按钮并查看它工作正常，您可以重新排序颜色，但尝试重新排序列表中的最后一个主题，您会发现它不起作用。我在控制台中没有看到任何错误。我用 Chrome 和 Firefox 都试过了，都遇到了同样的问题。

每次拖放颜色时，您还可以在控制台中查看当前和上一个索引。

这是该应用程序的链接。

我正在开发适用于 Mac 和 Windows 机器的应用程序。

我正在使用 *ngFor 循环浏览附有图标的菜单项列表。我在每个单独的菜单项上放置了一个类，以便我可以设置它们的样式。

风格

这导致以下结果。首先是 Chrome/Vivaldi/FireFox/Edge，其次是 Safari 和 Opera。IE 还有其他问题，因为我什至无法打开材料侧导航抽屉（这是一个单独的问题）。

为什么样式在 Safari 和 IE 上无法正常工作？如何制定仅对所选浏览器生效的 CSS 规则？

编辑：我发现包含 div 具有由 flex-layout npm 包创建的 flexbox。如果我在 Safari 的 css 编辑器中关闭 display flex，菜单看起来与 Chrome 中的一样。所以现在我需要了解如何解决这个问题，它应该可以工作。

我无法创建 Blitz，因为要取出的客户信息太多。

我想在使用 Angular 7 和材料设计显示的列表上具有悬停颜色。由于$primary,$accent和$warn颜色 不能很好地达到这个目的，我想获得与悬停时按钮相同的悬停颜色。我目前正在使用材料设计多主题示例中的 candy-app-theme 和 dark-theme ，所以我自己没有定义这种颜色。

但是，为了定义我的悬停颜色，我需要查询此按钮的悬停颜色。因此：我如何查询这种颜色？

}

我试图通过hoverand获取颜色focused-button，正如 TimTheEnchanter 在这个答案中列出的那样，但是这不起作用（我最终没有任何可见的悬停效果）。

我对基于 Angular Material 的应用程序中的 flex 布局行为有疑问。我想要一个简单的“卡片网格”布局，排成 3 张卡片（最大的屏幕），2 张中等大小的卡片和 1 张小屏幕的卡片。问题是当我在最大屏幕的最后一行只有一张卡时，因为最后一张卡的宽度是屏幕宽度的 100%。如何避免这个问题？

这是我当前的代码。

编辑：卡之间的差距没有问题。问题是最后一张卡片具有整个布局的 100% 宽度（而不是其他卡片的 1/3）。

嘿，我正在尝试设置 Angular Material SideNav，在完成基本布局设置后，我注意到 SideNav 打开（未结束）时右侧有一条白线。在开发工具中查看它时，它比我设置的宽度小 1 个像素。

所以 mat-sidenav 宽度比我在 CSS 中设置的小 1 个像素。我将它设置为 240，然后它返回 239，这使得它比预期的小 1 个像素，并暴露了它下面的白色。请参阅下面的屏幕截图。

我创建了一个重现此问题的 stackblitz。

https://stackblitz.com/edit/angular-skcmty?embed=1&file=app/sidenav-overview-example.html

我想显示从 api 到 Angular Material Datatable 的可用数据。响应并不总是像这样返回相同的内容（见下文）。我正在尝试合并 *ngIf。

我在网上看过样本（https://stackblitz.com/edit/angular-w9ckf8?file=app%2Fapp.component.ts），即使我删除了一些数据，它也能正常工作。想知道为什么我的不是。

我有一个总是打开的 mat-calendar 控件。在初始加载时，我突出显示了一组日期，这些日期能够执行以下操作：突出显示 mat-calendar 中的某些日期。现在我必须通过单击按钮突出显示今天（或选定的日期）。突出显示仅在我更改为不同月份时才有效，然后返回当前月份的视图。有没有办法动态刷新 mat-calendar？请指教。

https://am-all-imports-zwnjbd.stackblitz.io

我试图在创建垫表时从我的 material.module.ts 中导出一个模块。但是当我运行 localhost 时它没有显示任何内容，因为它给出了以下错误。我该如何解决这个问题？

材料.module.ts

我使用角材料步进器。我需要在移动视图上设置填充 0。在开发人员控制台上，我可以通过更改设置填充 0 .mat-horizontal-content-container。但是当我添加时它不起作用.mat-horizontal-content-container{padding:0 !important;}这个问题有什么解决方案吗？

使用排序标题实现AngularMaterial表我在控制台中收到此错误：

错误类型错误：无法设置未定义的属性“排序”

和终端中的这个错误：

错误 TS2740：“MatTableDataSource”类型缺少“Employee[]”类型中的以下属性：长度、弹出、推送、concat 等 24 个。

错误 TS2322：类型 'MatSort' 不可分配给类型 '(compareFn?: (a: Employee, b: Employee) => number) => Employee[]'。

类型 'MatSort' 不提供与签名 '(compareFn?: (a: Employee, b: Employee) => number): Employee[]' 的匹配。

我无法从我这里得到它想要的东西。我将不胜感激任何提示！

我使用了 AngularMaterial 文档中的代码，但数据接口除外。这可能是一个问题吗？

员工列表组件

员工列表 HTML

员工服务

员工类