嗨,我正在创建一个向导/步骤组件。如何使用ngClass
返回基于 的 css 类->
?
我有 5 个步骤,假设用户处于第 3 步。前面的所有步骤都应返回一个名为 css 的类active
,当前步骤(第 3 步)返回 css 类active
,第 3 步之后的所有步骤都应返回inactive
css 类。
<div class="step actived">
<span [ngClass]="displayActiveness()">Step 1
</span>
</div>
<div class="divider"></div>
<div class="step" [ngClass]="displayActiveness()">
<span>Step 2
</span>
</div>
.....
Run Code Online (Sandbox Code Playgroud)
TS:
displayActiveness(status) {
if (this.statusSelected === 'step3') {
return 'active';
} else if (
this.statusSelected === 'step4' || this.statusSelected === 'step5'){
return 'inactive';
}
else if (
this.statusSelected === 'step1' || this.statusSelected === 'step2'){ …
Run Code Online (Sandbox Code Playgroud) 嗨我有一个json数据如下:
{
"details":
{
"data1":
{
"monthToDate":1000,
"firstLastMonth":"December",
"firstLastMonthAmount":5000,
"secondLastMonth":"November",
"secondLastMonthAmount":12000
},
"data2":
{
"monthToDate":4000,
"firstLastMonth":"December",
"firstLastMonthAmount":10000,
"secondLastMonth":"November",
"secondLastMonthAmount":15000
},
"data3":
{
"monthToDate":2000,
"firstLastMonth":"December",
"firstLastMonthAmount":8000,
"secondLastMonth":"November",
"secondLastMonthAmount":12000
}
}
}
Run Code Online (Sandbox Code Playgroud)
如果下面的陈述,我有打字稿,
....
Object.values(data.details.data1).map(obj => {
if (obj === 'January') {
xAxisTranslatedArray.push(this.JAN);
} else if (obj === 'February') {
xAxisTranslatedArray.push(this.FEB);
} else if (obj === 'March') {
xAxisTranslatedArray.push(this.MAR);
} else if (obj === 'April') {
xAxisTranslatedArray.push(this.APR);
} else if (obj === 'May') {
xAxisTranslatedArray.push(this.MAY);
} else if (obj === 'June') { …
Run Code Online (Sandbox Code Playgroud) 我有一段包含链接的字符串。这些链接必须是可点击的并将用户重定向到特定页面。我已经编写了自定义管道,但我错过了这里的要点。
尝试过:
import {
Pipe,
PipeTransform
} from '@angular/core';
import {
DecimalPipe
} from '@angular/common';
@Pipe({
name: 'urlify'
})
export class UrlifyPipe implements PipeTransform {
transform(text: any): any {
var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
return text.replace(urlRegex, function(url) {
return '<a href="' + url + '">' + url + '</a>';
});
}
}
Run Code Online (Sandbox Code Playgroud)
还有我的字符串:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo www.sentinal.com. Aenean massa. Cum sociis http://sentinal.com et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies …
Run Code Online (Sandbox Code Playgroud) angular ×2
javascript ×2
css ×1
highcharts ×1
if-statement ×1
lodash ×1
ng-class ×1
typescript ×1