Angular 角度2-带@Input的嵌套组件未更新

我需要子组件变量来实时更新。 我尝试了@Input，但它只是初始化的，没有随时间而改变

父组件

   @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();
    }
  }

ПэцццΓ：{video.starting}

子组件

   @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();
    }
  }

父逻辑

  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) {

    }
  }

我记录了评级，但什么也没发生。I递增\递减值。父模型已更改，但更改不会通过@input发送给子模型。问题是如何实时绑定。是否可以使用@Input或我需要使用一些可观察/事件e.t.c

---

感谢阅读：）

它可以工作，但似乎您对

if（changedrop==“rating”）{…}

行有问题，因为您正在将对象与字符串进行匹配/比较

您需要将其更改为

if（propName==“rating”）{…}

---

这将解决问题。

什么是

video

和

video.starting

？。什么是

onRatingChanged（）

。您希望在何时何地更新输入？我有模型详细信息。有像4.5一样的星星，下面我有星星。有4.5颗星星。当我点击例如1星时，事件将上升。型号改为3.5磅。例如，我看到评级是3.124，但child的评级是相同的4.5。如果您能正确格式化代码，那就太好了。目前它是一个混乱和难以阅读。（不一致的缩进，多余的空行）。看起来好多了：）我认为问题在于

if（changedrop==“rating”）{…}

line。将其更改为

if（propName==“rating”）{…}

。检查一下，让我知道。