个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我无法设置图标颜色
我有一个带有五个垫子台阶的垫子水平步进器(例如命名为 A 部分、B 部分... E 部分)。根据某些业务规则，每个部分(mat-step)可能有不同的颜色。
我知道如何更改“选定的”垫子步骤或如何更改所有垫子步骤的颜色(具有相同颜色)但无法弄清楚如何动态更改它因此每个部分可能有不同图标背景颜色。
使用 Angular v7
以下是将第三个mat-step图标设置为绿色的样式。 Id 确实有效，但我不知道如何在运行时从组件( typescript )动态更改颜色。
::ng-deep .mat-step-header:nth-of-type(3) .mat-step-icon {
background-color: green!important;
}
我也试过使用 [ngClass] 但当用作 mat-step 属性时它会被忽略。它只有在我将步骤标签包含在其中并在那里使用它时才有效，但这不是必需的(我需要更改图标的背景颜色......而不是标签)。
预期结果:能够根据每个步骤的完成程度为每个步骤设置不同的列。 (mat-steps可以是黄色、红色、绿色和黑色的组合)，
实际结果:无法根据组件变量设置更改图标颜色
最佳答案
问题实际上是关于通过 TS 控制 CSS 变量 - 我从 this post here 得到了帮助;
firstClass & secondClass除了<body> ，我们可以为其分配唯一命名的变量 color1 , color2和 color3 ;[ngStyle]或 [ngClass]因为 Material 元素是在运行时创建的，我们只能对它们中的任何一个进行操作AfterViewInit事件，所以我们在这里为我们的 2 个 div 和 <body> 赋值标签；相关CSS:
::ng-deep .mat-step-header:nth-of-type(1) .mat-step-icon {
background-color: var(--my-var1);
}
::ng-deep .mat-step-header:nth-of-type(2) .mat-step-icon {
background-color: var(--my-var2);
}
::ng-deep .mat-step-header:nth-of-type(3) .mat-step-icon {
background-color: var(--my-var3);
}
相关HTML:
<div class='firstClass'>
<div class=' secondClass'>
<mat-horizontal-stepper labelPosition="bottom" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field>
<input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup" optional>
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>
<div>
<div>
相关TS:
import {Component, OnInit,AfterViewInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'stepper-label-position-bottom-example',
templateUrl: 'stepper-label-position-bottom-example.html',
styleUrls: ['stepper-label-position-bottom-example.css'],
})
export class StepperLabelPositionBottomExample implements OnInit, AfterViewInit {
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
color1:string = 'green';
color2:string = 'yellow';
color3:string = 'red';
constructor(private _formBuilder: FormBuilder) {}
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
firstCtrl: ['', Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
secondCtrl: ['', Validators.required]
});
}
ngAfterViewInit(){
document.querySelector("body").style.cssText = "--my-var1: "+this.color1;
(<HTMLElement>document.querySelector('.secondClass')).style.cssText = "--my-var2: "+this.color2;
(<HTMLElement>document.querySelector('.firstClass')).style.cssText = "--my-var3: "+this.color3;
}
}
关于css - Angular Material : How to set each mat-horizontal-stepper stepper icon with different background color in TS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57263433/
28
4
0
我有一组称为 nets 的整数集，我正在尝试对其进行迭代以确定是否已将来自或来自的整数添加到现有集合中；如果是这样，我将它们添加到现有集合中(这是为了跟踪电网中所有短路的组合)。 但是，我无法让 se
很奇怪:A 是一个集合，B 是一个集合的集合: Set A=new HashSet(); Set > B=new HashSet>(); 我给他们加了东西，输出 System.out.println
在 Agda 中，forall 的类型以这样的方式确定以下所有类型都是Set1 (其中 Set1 是 Set 的类型， A 的类型是 Set ): Set → A A → Set Set → Set
在 haskell 中我可以写一个函数 f where f :: Set a -> Set a -> Set a 如果我采用 Set Int 类型的两组 s1 和 s2，然后执行 f s1 s2 它将
在使用 Spring 时，我遇到了一个奇怪的问题。我有一个类，它接受一个集合作为输入，因为该类是底层框架的，所以我无法更改它。这是它的声明 private Set evaluate; public S
我是流的新手，我想通过将流操作应用于其条目集来修改 map ，但由于编译错误我无法这样做。 下面的代码只是创建了一个新的 map 对象并为其分配了一些整数值。然后它尝试通过在其条目集上应用流操作来删除
无论我看什么，我都会看到集合的输入是这样完成的: Set set = new HashSet(); 但是，我像这样定义我的集合 Set set = new HashSet(); 而且我仍然进行类型检查
我想对于 set -e 我可以捕获信号，但其他的我不知道。 最佳答案 为了完整性: set -e:如果命令失败则退出 set -u:如果在设置之前引用变量，则会出现错误 set -x:显示运行的命令
Set 维护唯一记录，并在尝试复制现有元素时更新现有记录。 考虑以下两种情况。您认为两者之间哪一个代码更快、更高效？ 场景 1:使用 addAll() Set uniqueSet = new Hash
我在 Fedora 上做这个 问题: (sandbox)[root@localhost mysite]# django-admin.py runserver Error: Could not impo
https://codeforces.com/contest/1435/submission/96757666->使用set.upper_bound() https://codeforces.com/
使用 MySQL，我已将连接字符集设置为 UTF-8: SET NAMES 'utf8mb4'; SET CHARACTER SET 'utf8mb4'; 这样我就能以 UTF-8 格式返回所有内容，
在 Spring 3 MVC 中，我有一个称为 SettingsController 的 Controller ，它具有用于显示用户列表的 displayUsers()、saveUser() 和 de
我正在创建一个使用语法的程序，并查看该语法是否为 LL (1)。我想使用模块Set，但是我不知道如何进行，当然set的元素的类型是char，你能帮忙吗？ 最佳答案 此答案假设您已经知道如何确定语法是否
好的，所以我重新整理了这篇文章，使其更容易理解(对所有的 Pastebin 感到抱歉，但堆栈溢出在代码格式化方面很愚蠢) 请注意，我不打算存储如下所述的大量数据。我使用我所说的数量的主要原因是为了尽可
我有一个密码，我保存在 Settings.settings 文件中并且我希望该部分被加密。 This是我得到的提示，但我真的不知道如何应用它。 谁能给我一个关于如何加密这样的密码的想法？ 最佳答案 您
我在网上搜索并找到了如何在设置中添加特定的自定义数据类型。 我自己插入数据，而不是在程序运行时通过代码插入数据。我的问题是如何将自定义数据类型添加到设计器中的组合框。现在我想通了，需要建议，如何添加这
我一直在尝试将自定义类的自定义集合添加到我的 winforms 项目的应用程序设置中，我觉得我已经尝试了六种不同的方法，包括 this way , this way , this way , 和 th
在 Visual Studio 2008 中调试我的项目时，我的 Settings.settings 文件在构建之间不断重置。有没有办法防止这种情况发生？ 谢谢。 最佳答案 好的，我找到了我真正想要的
关闭。这个问题不符合 Stack Overflow guidelines 。它目前不接受答案。 想改善这个问题吗？更新问题，以便堆栈溢出为 on-topic。 4年前关闭。 Improve this
我是一名优秀的程序员,十分优秀！