Угловой 4-5: пользовательская директива не работает в * ngFor - PullRequest
Новая
       10

Угловой 4-5: пользовательская директива не работает в * ngFor

0 голосов
/ 14 ноября 2018

Я создал пользовательскую директиву, чтобы разрешить только числовое значение в текстовом поле. Обычно он работает нормально, но всякий раз, когда я пытаюсь войти в * ngFor, он вообще не работает.

Здесь OnlyNumber является пользовательской директивой. 

import { Directive, ElementRef, ChangeDetectorRef, Input, HostListener } from "@angular/core";
import { NgControl } from "@angular/forms";

@Directive({
  selector: '[OnlyNumber]' 
})

export class OnlyNumberDirective {
  constructor(private cdRef: ChangeDetectorRef, private el: ElementRef, private ngControl: NgControl) { }

  @Input() OnlyNumber: boolean;

  @HostListener('keydown', ['$event']) onKeyDown(event) {    
    let e = <KeyboardEvent> event;
    if (this.OnlyNumber) {
      if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+C
        (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+V
        (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+X
        (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
          // let it happen, don't do anything
          return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
      }
  }
}

Не рабочий код 

<tbody id="quote_type1_tbody" *ngFor="let loTempQuoteProduct of this.moTempQuoteProductList"> 
     <tr>
         <td> 
            <input type="text" id="ListCost" maxlength="8" 
                class="form-control m-input" placeholder="Enter list cost"
                [ngModel]="TempProduct.Cost"
                (ngModelChange)="TempProduct.Cost = $event;" 
                OnlyNumber="true">
         </td>
     </tr>
</tbody>

Рабочий код - снаружи NGFor 

<input type="text" id="ListCost" maxlength="8" 
            class="form-control m-input" placeholder="Enter list cost"
            [ngModel]="TempProduct.Cost"
            (ngModelChange)="TempProduct.Cost = $event;" 
            OnlyNumber="true">

Ваше ценное время и ответ будут оценены.

Спасибо за совет !!

...