Javascript 属性指令角度

我创建了一个属性指令，根据输入的一系列数字显示网络的徽标。但是，我无法让我的HTML页面显示任何内容。我的项目已编译，但HTML页面显示为空白。我做错了什么

下面是我的app.component.html代码：

<input type="text"[(ngModel)]="cardNumberInput"/>
<p>{{cardNumberInput}}</p>
<img applogo [cardType]="cardNumberInput" width="30"/>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LogoDirective } from './logo.directive';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    LogoDirective
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

指令。ts:

<input type="text"[(ngModel)]="cardNumberInput"/>
<p>{{cardNumberInput}}</p>
<img applogo [cardType]="cardNumberInput" width="30"/>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LogoDirective } from './logo.directive';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    LogoDirective
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

指令规范ts:

<input type="text"[(ngModel)]="cardNumberInput"/>
<p>{{cardNumberInput}}</p>
<img applogo [cardType]="cardNumberInput" width="30"/>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LogoDirective } from './logo.directive';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    LogoDirective
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

属性绑定中有几个错误。请更正您的模板，如下所示：

您的属性选择器名称是logo而不是applogo

您的属性输入名称是cardNumber而不是cardType

您没有在图像中指定src属性

需要更改

import {Directive, Input, OnChanges, HostBinding} from '@angular/core';

enum CardType { VISA = 'visa', MASTERCARD = 'mastercard', AMERICAN_EXPRESS = 'aexpress', DISCOVER = 'discover', DINERS = 'diners', UNKNOWN = 'unknown'}

@Directive({
  selector: '[logo]'
})
export class LogoDirective implements OnChanges {


  @HostBinding('src')
  imageSource;

  @Input()
  cardNumber: string;

  ngOnChanges() {
    this.imageSource = 'assets/cards' + this.getCardTypeFromNumber() + '.png';
  }

  getCardTypeFromNumber(): CardType {
    if (this.cardNumber) {
      if (this.cardNumber.startsWith('34')) {
        return CardType.AMERICAN_EXPRESS;
      } else if (this.cardNumber.startsWith('4')) {
        return CardType.VISA;
      } else if (this.cardNumber.startsWith('5')) {
        return CardType.MASTERCARD;
      } else if (this.cardNumber.startsWith('60')) {
        return CardType.DISCOVER;
      } else if (this.cardNumber.startsWith('30')) {
        return CardType.DINERS;
      }
    }
    return CardType.UNKNOWN;
  }

}

构造函数（私有元素：ElementRef）{
}
ngOnChanges（）{
调试器；
this.imageSource='assets/cards'+this.getCardTypeFromNumber（）+'.png'；
this.element.nativeElement.src=this.imageSource；
this.element.nativeElement.alt=this.imageSource；
}
{{cardNumberInput}

{{cardNumberInput}

你可以看到这场闪电战- 它显示了alt属性，因为我没有这些图像

---

我希望这会有所帮助。

嗨，王子，谢谢你的回复。我不知道如何将我的项目上传到StackBlitz。更正后我仍然有问题。请给我一些时间，我会为您添加解决方案。我也用stackblitz链接更新了我的答案。嘿，王子，谢谢！！我可以看到它在Stackblitz上工作，它在VSstudio中仍然显示为空白，所以我不确定发生了什么。但是我确信如果你的语法在Stackblitz上运行的话是正确的。你能告诉我你对代码做了哪些修改吗？这样我就知道该去哪里找了？