typescript - Angular 2 - Nestad komponent med @Input uppdateras inte

Logiken av IMG Jag behöver att barnkomponentens variabel uppdateras i realtid. Jag försökte med @Input men den är bara initialiserad och ändras inte över tid.

Föräldrakomponent

<div>
    <h4>Рэйтынг : {{video.starRating}}</h4>
    <star-rating 
        [rating]="video.starRating" 
        (ratingChanged)="onRatingChanged($event)">
    </star-rating>
</div>

Barnkomponent

   @Component({
        selector: 'star-rating',
        templateUrl: 'app/shared/star-rating.component.html',
        styleUrls:['app/shared/star-rating.component.css'],
        inputs:['rating']
   })
   export class StarRatingComponent implements OnInit,OnChanges {

     rating: number;
     @Output() ratingChanged = new EventEmitter<number>();

     ngOnChanges(changes: {[propKey: string]: SimpleChange}) {

        for (let propName in changes) {
            let changedProp = changes[propName];
           if(changedProp == "rating"){
               this.calcStarRating();
               console.log("rating = "+this.rating);
               console.log("ratingCurr = "+changedProp.currentValue);
               console.log("ratingPrev = "+changedProp.previousValue);
           }
        }
    }

    onStarClicked(item: number) {
        this.ratingChanged.emit(item + 1);
    }

    calcStarRating() {
        ...calc logic....
        console.log(this.rating)
    }

    ngOnInit() {
        this.calcStarRating();
    }
  }

Videon är

export class Video{
    videoId:string;
    videoTitle:string;
    price: number;
    description: string;
    starRating: number;
    imageUrl: string;
}

Föräldralogik

  export class VideoDetailComponent implements OnInit ,OnDestroy{

    video:Video;

    private sub: Subscription;

    ngOnInit() {
        this.sub = this._routeParams.params.subscribe(params=>{
            if(params && params['id']){
                this.sub1 =  this._vs.getItemById(params['id'])
                    .subscribe(t=>this.video = t);
            }
        });
    }

    onRatingChanged(rating:number){
        if(this.video.starRating!=0){
            this.video.starRating +=rating;
            this.video.starRating /= 2;
        }
        else this.video.starRating = rating;

        this.video.starRating = +this.video.starRating.toFixed(2);
        this._vs.updateItem(this.video);
    }

    onBack(){
        this.router.navigate(['/list']);
    }


    constructor(private _routeParams: ActivatedRoute,
                private _vs:VideoService,
                private router: Router) {

    }
  }

Jag loggade betyg och inget händer. Jag ökar/minskar värde. Föräldramodellen ändrades, men ändringarna skickas inte till barnet via @input. Frågan är hur man binder i realtid. Är det möjligt med @Input eller behöver jag använda någon Observable/Events osv.

Tack för att du läste:)

Svar #1

Det fungerar men det verkar som att du har problem med raden if(changedProp == "rating"){...} eftersom du jämför/matchar ett objekt med en sträng.

Du behöver ändra det till if(propName == "rating"){...}.

Detta kommer att lösa problemet.