小编che*_*ewi的帖子

Angular 2 ngClass 函数

嗨,我正在创建一个向导/步骤组件。如何使用ngClass返回基于 的 css 类->

我有 5 个步骤,假设用户处于第 3 步。前面的所有步骤都应返回一个名为 css 的类active,当前步骤(第 3 步)返回 css 类active,第 3 步之后的所有步骤都应返回inactivecss 类。

<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)

css ng-class angular

4
推荐指数
1
解决办法
1万
查看次数

简化if else语句

嗨我有一个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)

javascript if-statement highcharts typescript lodash

2
推荐指数
1
解决办法
106
查看次数

如何识别段落中的链接并使其可点击 Angular 2

我有一段包含链接的字符串。这些链接必须是可点击的并将用户重定向到特定页面。我已经编写了自定义管道,但我错过了这里的要点。

尝试过:

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)

javascript angular

0
推荐指数
1
解决办法
1137
查看次数