问题标签 [mat-card]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
1219 浏览

html - 如何以角度过滤垫卡

我想知道如何使用搜索栏(https://stackblitz.com/edit/stackoverflowcom-a-60857864-6433166-dpaump)和下面的代码能够使用它的名称过滤卡片。

这是我的 Explore TS 文件(我从不同的文件中导入了 matcards 和 routers 组件)

这是在 HTML 文件中显示卡片

这就是现在的样子

[![在此处输入图像描述][1]][1]

注意:我没有将上面的代码包含在我的 Stackblitz 文件中,因为涉及到很多组件,我想知道是否有人可以帮助我或通过查看上面的代码给我关于如何为卡片实现此过滤器功能的提示和堆栈闪电战文件。

0 投票
1 回答
1877 浏览

html - 如何在 Angular 中实现删除功能

我在 Angular 组项目中,我正在尝试为当前工作区实现删除功能,但我不知道该怎么做。关于如何做到这一点的任何建议或帮助?

在 add-workspace.HTML 文件中,我有一个显示对话框的按钮(delete-workspace-dialog)。

在 delete-workspace-dialog 组件文件中,有一个删除按钮。我正在尝试使用该按钮删除当前工作区。

在 delete-workspace.dialog.ts 文件中又名删除对话框

我正在尝试使用“是,删除它”按钮来删除当前工作区

0 投票
0 回答
218 浏览

angular - 如何创建过滤管来过滤垫卡?

我正在尝试添加一个搜索过滤器管道来过滤 html 中的卡片,但我似乎不知道该怎么做,有什么想法吗?

下面的代码是为了让我了解我想要达到的结果,如果您需要任何其他信息,请询问:) 谢谢

list.component.html

管道

0 投票
1 回答
1024 浏览

html - 关于不显示垫卡

我使用了一个 mat-card,在里面我使用了 mat-card-title 和一个带有 4 到 5 个控件的表单,mat-card 布局在浏览器中的部署中不可见,但是 mat-card 标题正在显示,我已经发布了表单仅 mat-card-content 内的内容和控件

这是模板代码,

这是浏览器输出窗口的图像,

在此处输入图像描述

我知道我只是犯了一个小错误,我是新手,请纠正我,提前谢谢:-)

0 投票
2 回答
1347 浏览

html - 关于 mat-card-title 不对齐中心

我用过 mat-card,因为我用过 mat-card-title,因为我用过style="text-align:center";但它没有对齐中心

这是浏览器的截图:

在此处输入图像描述

0 投票
0 回答
1806 浏览

css - 无法将 mat-card 拆分为两列

我正在尝试将<mat-card>我拥有的分成两列,如下所示: 在此处输入图像描述

左侧的图像可能占卡的 25%,右侧的标题 + 2 个扩展面板在一列中。无论我尝试什么,总是有一个列,所以它看起来像这样:

img h1 expansion panel expansion panel

这在小屏幕上很好,但对于更大的屏幕,我希望它像上图一样。我还注意到,无论我是否向其添加样式并更改它,图像都不会调整大小。

这是HTML:

我对上述的理解是

  • 垫卡使用行换行包装在 div 中,这意味着垫卡将连续出现并在最后换行到新行
  • 在 mat-card-content 内部,我有一个使用 row 用于 fxLayout 的 div,这意味着每个子元素应该并排。因为我将 img 拆分为一个 div,将 h1/扩展面板拆分为另一个,所以这两个 div 应该并排排列正确吗?
  • 因为我将第一个 div 设置为 25%,所以它应该占行宽的 25%,而第二个 div 应该占 75%。

我在这里有什么问题?

编辑:这是我从另一篇文章中看到的垫卡示例,与我想要实现的目标相似。不幸的是,该解决方案对我不起作用:如何将 mat-card-image 高度设置为 100%?

在此处输入图像描述

更新:我很愚蠢。我没有安装 flex-layout 模块。如果有人想知道为什么他们的 fxlayout 东西不起作用,请确保您已安装它并将其添加到您的导入中!

0 投票
1 回答
4951 浏览

angular - 强制 mat-expansion-panel 溢出容器元素

我有mat-expansion-panel一个mat-card. 扩展面板包含mat-chip-list50-60个mat-chip元素。

当我展开这个面板时,我所有的mat-card对象都被向下拉伸,并且芯片一个一个地显示在一个列中。

我想要做的是让扩展面板显示在其容器的顶部,这样用户就可以一次看到所有的垫子,而不必向下滚动一堆。

这是我所看到的: 在此处输入图像描述

这是复制我所看到的代码: https ://stackblitz.com/edit/angular-ivy-8lx7gr

我对实现这一目标的替代方法持开放态度。

0 投票
1 回答
305 浏览

angular - 如何设置循环垫卡的活动颜色?

我有一张环形的垫卡。如何设置我点击的卡片的活动颜色?

0 投票
1 回答
389 浏览

angular - 角卡中的垂直截面

我正在尝试复制一个 mat-card 布局,但还没有找到合适的词来搜索。我正在使用 angular 并且想要设置一个在左侧有一个垂直部分的 mat-card,它允许我放置一个以剖面线为中心的徽标。我已经包含了我正在尝试重新创建的示例图像。示例卡

我的卡

我尝试添加一个“旁白”,但除非我包含文本,否则它不会出现。

0 投票
1 回答
721 浏览

html - Angular 8一次显示一张图像

我正在尝试为我拥有的每个对象显示一个头像。该对象位于MongoDB数据库中,并且它也被一一显示。我遇到的问题是,如果我在显示对象时显示图像(假设我显示了 3 个对象),它会显示每个显示对象的所有 3 个化身,而不仅仅是每个对象的一个​​图像。这是我的代码: