'x'의 알려진 속성이 아니기 때문에 'inputDate'에 바인딩 할 수 없습니다

Question

timediff 변수를 하위 카운트 다운 구성 요소에 바인딩하려고합니다.

zone.js:522 Unhandled Promise rejection: Template parse errors: 
Can't bind to 'inputDate' since it isn't a known property of 'countdown'. (" 

      <div *ngIf="countdown > 0"> 
      <countdown [ERROR ->]inputDate="{{timediff}}">{{ timediff | date: 'yMMMdjms' }}</countdown> 
      </div> 


Can't bind to 'inputDate' since it isn't a known property of 'countdown'. (" 

      <div *ngIf="countdown > 0"> 
      <countdown [ERROR ->]inputDate="{{timediff}}">{{ timediff | date: 'yMMMdjms' }}</countdown> 
      </div> 

어떻게 내 변수를 받아 들일 수 : 는하지만 난 다음 얻을? timediff 값의

예 :

1494418776073 

HTML :

<countdown inputDate="{{timediff}}">{{ timediff | date: 'yMMMdjms' }}</countdown> 

구성 요소 :

import { Component, OnInit, Input, OnChanges, ElementRef, OnDestroy } from '@angular/core'; 
    import { Observable, Subscription } from "rxjs/Rx" 

    @Component({ 
     selector: 'countdown', 
     template: `{{message}}`, 
    }) 
    export class CountdownComponent implements OnInit { 
     private future: Date; 
     private futureString: string; 
     private diff: number; 
     private $counter: Observable<number>; 
     private subscription: Subscription; 
     private message: string; 


     constructor(elm: ElementRef) { 
     this.futureString = elm.nativeElement.getAttribute('inputDate'); 
     } 

     dhms(t) { 
     var days, hours, minutes, seconds; 
     days = Math.floor(t/86400); 
     t -= days * 86400; 
     hours = Math.floor(t/3600) % 24; 
     t -= hours * 3600; 
     minutes = Math.floor(t/60) % 60; 
     t -= minutes * 60; 
     seconds = t % 60; 

     return [ 
      hours + 'h', 
      minutes + 'm', 
      seconds + 's' 
     ].join(' '); 
     } 




     ngOnInit() { 
     this.future = new Date(this.futureString); 
     this.$counter = Observable.interval(1000).map((x) => { 
      this.diff = Math.floor((this.future.getTime() - new Date().getTime())/1000); 
      console.log(x); 
      return x; 
     }); 

     this.subscription = this.$counter.subscribe((x) => this.message = this.dhms(this.diff)); 

     } 
     ngOnDestroy(): void { 
     this.subscription.unsubscribe(); 
     } 


    } 

Answer 1

당신이 CountdownComponent에 코드 아래에 추가해야합니다.

@Input() 
inputDate: string; 

아래와 같이 템플릿에서 사용 :

<countdown [inputDate]="timediff">{{ timediff | date: 'yMMMdjms' }}</countdown>