角度自定義指令CSS

Question

嘗試在Angular中創建自定義指令時遇到問題。 這是我的html代碼：

 <div class="col-12 col-md-6 col-lg-6">              
    <label [hidden]="!initservicesService.invoiceCurrencyLblVisible" for="">Invoice Currency</label>
       <select class="form-control" name="currencyCd" [hidden]="!initservicesService.invoiceCurrencyComboBoxVisible" [(ngModel)]="billProfileDO.currencyCd" id="" [disabled]="initservicesService.invoiceCurrencyComboBoxEnabled" [required]="initservicesService.invoiceCurrencyComboBoxCompulsory"                     (ngModelChange)="invoiceCurrencyComboBox_valueChanged($event)">
            <option *ngFor="let item of invoiceCurrencyList" value="{{item.cdValue}}">{{item.decodeValue}}</option>
        </select>
</div>

然后，在我的“必需”指令類中，我嘗試為每個必需屬性的標簽添加“ *”：

import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
    selector: '[required]'
})
export class RequiredDirective {
    constructor(public el: ElementRef) {
        this.el = el;
    }
    // tslint:disable-next-line: use-life-cycle-interface
    ngOnInit() {
        this.formRequiredFunctions();
    }

    public formRequiredFunctions() {
        const that = this.el.nativeElement;
        console.log(that)
        const className: any = this.el.nativeElement.className;
        if (className === 'form-control') {
            $(that)
                .prev('label')
                .after('<span class="required"> *</span>');
            $(that)
                .prev('.form-tooltip')
                .prev('label')
                .after('<span class="required"> *</span>');
            $(that)
                .parent('.input-group')
                .prev('label')
                .after('<span class="required"> *</span>');
        } 
    }
}

但是，問題在於，對於那些具有“必填”和“隱藏”屬性的字段，“ *”仍在顯示，因此不應顯示。 有任何想法嗎？

謝謝！

Answer 1

您不需要為required創建自定義指令，因為Angular已經介紹了該指令（請參閱此處 ）。 將其與ngIf指令一起使用（請參見此處 ），以在標簽上顯示“ *”。

<div class="col-12 col-md-6 col-lg-6">
  <label [hidden]="!initservicesService.invoiceCurrencyLblVisible" for="currencyCd">
    Invoice Currency<span *ngIf="initservicesService.invoiceCurrencyComboBoxCompulsory"> *</span>
  </label>
  <select class="form-control" name="currencyCd" id="currencyCd"
    [hidden]="!initservicesService.invoiceCurrencyComboBoxVisible"
    [disabled]="initservicesService.invoiceCurrencyComboBoxEnabled"
    [required]="initservicesService.invoiceCurrencyComboBoxCompulsory"
    (ngModelChange)="invoiceCurrencyComboBox_valueChanged($event)" [(ngModel)]="billProfileDO.currencyCd">
    <option *ngFor="let item of invoiceCurrencyList" value="{{item.cdValue}}">
      {{item.decodeValue}}
    </option>
  </select>
</div>