Kann nicht an 'x' binden, da es keine bekannte Eigenschaft von 'input' ist. Angular 2

Question

Verwendung von Angular 2 mit Problemen beim Binden der regulären Eigenschaft an den Telefoneingang. Das Problem ist unter:

Error: Template parse errors: 
Can't bind to 'textMask' since it isn't a known property of 'input'. ("lass="form-control" name="phone" id="phone" placeholder="Phone" [(ngModel)]="stepModel.phoneNumber" [ERROR ->][textMask]="{mask: mask}" #phone="ngModel"> 
        <input type="email" class="form-cont"): AdvancedReviewStepEarn@14:139 

Hier der Eingang:

<input type="tel" class="form-control" name="phone" id="phone" placeholder="Phone" [(ngModel)]="stepModel.phoneNumber" [textMask]="{mask: mask}" #phone="ngModel"> 

und Komponenten

import { Component, OnInit, OnDestroy, Injector, ViewChild, ElementRef } from '@angular/core' 
import { OperationResult, OperationDataResult, HeaderActivity } from '../../helpers/operation.models' 
import { ActivatedRoute, Router } from '@angular/router'; 
import { ToolsService } from '../../services/tools.service' 
import { SpinnerService } from '../../services/spinner.service' 
import { AdvancedReviewService } from '../../services/advanced.review.service' 
import { Step4Model, EarnCashViewModel } from '../../helpers/advanced.review.models' 
import { TermsComponent } from '../terms.component' 
import { SpinnerComponent } from '../spinner.component' 
import { NgOperationValidation } from '../../helpers/operation.validation' 
import { HeaderType, AdvancedReviewPage, HeaderTitle, AdvancedReviewParams, parseAdvancedReviewRoute, Page } from '../../helpers/platform.helpers' 

@Component({ 
    selector: 'advanced-review-step-earn-component', 
    templateUrl: '../../templates/advanced-review-templates/advanced.step.earn.component.html' 
}) 
export class AdvancedReviewStepEarn implements OnInit, OnDestroy { 

    @ViewChild('operationSpinner') operationSpinner: SpinnerComponent; 
    @ViewChild('termsRef') terms: TermsComponent; 
    @ViewChild('earnStepForm') earnStepForm; 
    @ViewChild('operation') operationValidation: NgOperationValidation; 
    private isSimple: boolean = false; 
    private stepModel: Step4Model; 
    private earnModel: EarnCashViewModel; 
    private stepParams: AdvancedReviewParams; 
    private isEarnCache: boolean; 
    private isShowTerms: boolean = false; 
    public mask: Array<string | RegExp>; 

    constructor(private toolsService: ToolsService, 
     private spinner: SpinnerService, 
     private advancedReviewService: AdvancedReviewService, 
     private injector: Injector, 
     private router: Router) { 
     this.initModels(); 
     this.mask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]; 
    } 



    initModels(): void { 
     this.stepParams = parseAdvancedReviewRoute(this.injector); 
     if (this.stepParams.isParsed) { 
      this.earnModel = new EarnCashViewModel(); 
      this.stepModel = new Step4Model(); 
      this.stepModel.reviewId = this.stepParams.reviewId; 
      this.advancedReviewService.getDataForEarnCache().subscribe(this.onDataForEarnCacheLoaded.bind(this)); 
     } else { 
      this.router.navigateByUrl(Page.NotFound); 
     } 
    } 

    ngOnInit(): void { 
    } 



    ngOnDestroy(): void { 
     this.spinner.start(); 
    } 
} 

Ich habe keine möglichen Ideen wie diese zu lösen. Habe dieses Problem beim Laden dieser Seite.

Answer 1

Lösen Sie dies durch Import angular2-text-mask Modul und injizieren Sie MaskedInputDirective Deklarationen.