- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
所以我想做的是将不同的样式应用于在 Angular 中使用 ngFor 创建的卡片。
我的目标是为每张卡片设置不同的样式。由于它是使用 ngFor 循环创建的,因此我只能为所有这些更改样式。
然后我设法为每个卡片元素分配一个类:
<div *ngFor="let module of modules" class="{{module.name}}">
之后我在 CSS 中应用了样式:
div.Rekrutacja {
background-color: rgb(1, 1, 1);
}
这部分起作用了。它选择了第一个元素,但我无法真正修改它。我将背景颜色设置为黑色,这就是我得到的:
所以它只是应用于某个区域(我不知道它是什么区域),我无法进入实际的垫卡以将其与其他区域分开。
HTML:
<div class="flex-container">
<div *ngFor="let module of modules" class="{{module.name}}">
<mat-card matRipple [matRippleColor]="white" class="flex-items hvr-reveal" *ngxPermissionsOnly="module.permissionsRequired">
<span routerLink={{module.routing}}>
<mat-card-header>
<mat-card-title>
<h1>
<p style="text-align: center;">
{{module.name}}
</p>
</h1>
</mat-card-title>
</mat-card-header>
<div class="mat-icon-card">
<p style="text-align: center">
<mat-icon>{{module.icon}}</mat-icon>
</p>
</div>
<mat-divider></mat-divider>
<mat-card-content>
<h3>
<p style="text-align: center">
{{module.description}}
</p>
</h3>
</mat-card-content>
</span>
</mat-card>
</div>
</div>
CSS:
.mat-card {
background-color: rgba(255, 255, 255, 0.7);
}
div.Rekrutacja {
background-color: rgb(1, 1, 1);
}
TS:
modules: any = [
{
name: 'Rekrutacja',
icon: 'group',
description: 'Moduł obsługi działu rekrutacji. Zarządzanie kandydatami.',
routing: '/recruitment',
permissionsRequired: [CONSTS.permissionCodes.accessRecruitmentModule]
},
{
name: 'Sprzedaż',
icon: 'work',
description: 'Moduł obsługi działu sprzedaży. Zarządzenie firmami, osobami kontaktowymi i leadami.',
routing: '/sales',
permissionsRequired: [CONSTS.permissionCodes.accessSalesModule]
},
{
name: 'Ustawienia',
icon: 'settings',
description: 'Moduł panelu administracyjnego. Zarządzanie użytkownikami i ustawieniami aplikacji.',
routing: '/admin-panel',
permissionsRequired: [CONSTS.permissionCodes.accessAdminPanelModule]
},
];
最佳答案
而不是定位 <div>
包装 <mat-card>
这将导致背景颜色应用于 <div>
, 瞄准实际 <mat-card>
各自的 <div>
:
div.Rekrutacja .mat-card {
background-color: rgb(1, 1, 1);
}
div.Sprzedaż .mat-card {
background-color: blue;
}
div.Ustawienia .mat-card {
background-color: yellow;
}
这是一个简化的 example在行动中。
希望对您有所帮助!
关于html - 使用 Angular 中的 ngFor 创建的具有不同样式的样式卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56114064/
我有 Angular + Firebase 应用程序。在我的一个组件中,我从 Firebase DB 获取元素并使用 *ngFor 将它们绑定(bind)到模板中: {{ comment.te
以下场景在 javascript 中会很简单,但我在 Angular 中遇到了一些问题。 我有一个像这样的数组: array a = ( "id" = 0, name = random(), colu
我有一个由部分组成的 firebase json 对象。部分内部还有部分线程。我正在尝试迭代这些部分,然后迭代线程。问题是我收到此错误 InvalidPipeArgument:管道“AsyncPipe
我无法在任何地方找到对差异的准确描述。与 *ngIf 和 ngIf 相同 *ngFor的例子 和一个ngFor的例子 最佳答案 区别在于*ngFor转换为 ) 允
这是一个我想实际解决的示例问题。我们将非常感谢您的帮助。非常感谢! 最佳答案 除非将其中一项设置为变量,否则无法直接显示 *ngFor 之外的一项
我如何在 Angular 2 中使用 *ngFor 遍历多维数组。下面是我使用的 DOM 包装器: 0 }"> {{menuName.name}} Pages
标题可能看起来很奇怪,但我所说的基本上是this link。正在做。 我正在寻找一种方法来使用当前迭代的 person在在*ngFor之外范围。 在他使用的链接中 ng-repeat-start和 n
我有以下对象: itemList = { "0": [], "1": [], "2": [], "3": [] }; 我还有以下 *ngFor: 如您所
我试图在我的 Angular 应用程序中显示对话列表,然后在每个对话标题下显示这些不同对话中包含的消息。 这是我最新的代码- HTML: {{ conversation.conversat
我想从 *ngFor 中删除 *ngFor 中的项目。 当我删除回复“test2”时, 在我添加其他回复后,“test3”变为空。
在表头中,我有动态列和搜索排序功能。但对于特定的列,我需要禁用排序功能。在表中 {{colName}}
我是 Angular 2 的初学者。我正在尝试创建一个具有动态表单的表,创建了表并且还绑定(bind)了值但是我无法访问 formControlName 中的值,尝试了下面的代码但它没有用。 有人可以
我正在使用Flowbite(flowbite.com),这是一个Tailwind CSS插件,正如你在我的Angular项目中所知道的。。一切都工作得很好,除了当我调用一个抽屉按钮内的表,这是渲染与n
{{ recipe.name }} {{ recipe.description }} 由于这条消息,我不能在这
我如何使用 ngFor 循环遍历以下对象数组并仅获取月份的名称? { "Jan": { "name": "January", "short": "Jan", "number
我正在 Angular 6 中开发一个 Web 应用程序。我从 Firebase 收到一组对象,并尝试使用 ngFor 向用户显示详细信息。我的对象数组是这样的: export interface C
抱歉,我不能在这里发布所有代码。但是,如果你能给我一些关于需要做什么的提示,我将不胜感激。 让我试着解释一下我的困境。 所以,这是我一直在尝试使用的代码片段 ngFor和 ngIf上:
我正在用数组中的数据填充表格,我想将自定义输入集中在表格的最后一个元素上,所以我有这个: {{ a few table fields}}
我有来自服务器的以下 JSON 响应: stuff = [ { "_id":"59080892c88561d46736a18d", "name":"Miscellaneo
我使用以下方法创建了一个 Angular 库: ng new my-workspace --create-application=false cd 我的工作区 ng 生成库 my-lib 图书馆工作。
我是一名优秀的程序员,十分优秀!