如何根据信用卡的第一个或两个第一个数字显示信用卡徽标

Question

我是Angular的初学者，尝试使用attribute指令根据五张信用卡的第一个数字或两个第一个数字显示它们的徽标。代码如下，适用于Visa和万事达卡，如果其中没有"4"或"5"位，则适用于前两位，如果有，则更改为Visa或万事达卡。例如，数字"34"而不是显示美国运通标志显示签证或"65"显示发现显示万事达卡。此外，它只适用于第一串，"38"对食客来说毫无意义。

我感谢任何帮助！

import { Directive, Input, OnChanges, HostBinding } from '@angular/core';
@Directive({
selector: '[appCCImage]'
})
export class CCImageDirective implements OnChanges {
constructor() { }
@Input() cardNumber: string;
@HostBinding('src') imageSource;
ngOnChanges() {
this.imageSource = './assets/default.png';
if(this.cardNumber){
if (this.cardNumber.indexOf('30' || '36' || '38' || '39') >-1) 
this.imageSource = './assets/diners.png';
if (this.cardNumber.indexOf('5') >-1)  
this.imageSource = './assets/mastercard.png';
if (this.cardNumber.indexOf('34' || '37') >-1)
this.imageSource = './assets/amex.png';
if (this.cardNumber.indexOf('60' || '64' || '65') >-1)
this.imageSource = './assets/discover.png';
if (this.cardNumber.indexOf('4') >-1)
this.imageSource = "./assets/visa.png"
}
}
}

Answer 1

检查以下函数，根据需要修改响应或从函数中重新运行，我已经使用过了，效果很好。因此，我取出4个值，然后对该值进行if-else检查。这是Vuejs中的一个手表功能(不知道Angular中的等效功能是什么，但考虑到基本的html事件，onKeyPress可以工作(

cardNumber(value) {
if (value != "") {
// Taking out values from the input
var oneValue = parseInt(value.substring(0, 1));
var twoValue = parseInt(value.substring(0, 2));
var threeValue = parseInt(value.substring(0, 3));
var fourValue = parseInt(value.substring(0, 4));
//the if else
if (twoValue == 34 || twoValue == 37) {
//card is amex
this.cardType = "fa-cc-amex";
} else if (oneValue == 4) {
//card is visa
this.cardType = "fa-cc-visa";
} else if (
(threeValue >= 300 && threeValue <= 305) || fourValue == 3095 ||
twoValue == 36 || twoValue == 38 || twoValue == 39) {
//card is diners club or could be diners club
this.cardType = "fa-cc-diners-club";
} else if ((fourValue >= 2221 && fourValue <= 2720) ||
(twoValue >= 51 && twoValue <= 55)) {
//card is mastercard
this.cardType = "fa-cc-mastercard";
} else if (fourValue >= 3528 && fourValue <= 3589) {
//card is jcb
this.cardType = "fa-cc-jcb";
} else if (fourValue == 6011) {
//card is discover
this.cardType = "fa-cc-discover";
} else {
//unknown card
this.cardType = "";
}
} else {
//unknown card
this.cardType = "";
}
}

如果你遇到任何问题，请告诉我。