错误：模板解析错误：无法绑定到“评级”，因为它不是“评级”的已知属性

Question

Im trying to make a rating system in a component, to import it in other pages in my app

this is my the piece of code in home.html that give me error (Where I want the rating):

<rating [(rating)]="rating"> </rating>

this is the code in rating.html:

<div>
  <ion-icon name="star" *ngFor="let num of[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
  (click)="rate(num)" [ngStyle]="{'color': getColor(num)}">
</ion-icon>
</div>

and this is my code in rating.component.ts:

@Input() rating: number;

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

  constructor() { }

  rate(index: number){
    // function used to change the value of our rating 
    // triggered when user, clicks a star to change the rating
    this.rating = index;

    this.ratingChange.emit(this.rating);

  }

  getColor(index: number) {
    /* function to return the color of a star based on what
     index it is. All stars greater than the index are assigned
     a grey color , while those equal or less than the rating are
     assigned a color depending on the rating. Using the following criteria:

          1-2 stars: red
          3 stars  : yellow
          4-5 stars: green 
    */

    if(this.isAboveRating(index)){
      return COLORS.GREY;
    }

    switch(this.rating){
      case 1:
      case 2:
      case 3:
      case 4:
        return COLORS.RED;
      case 5:
      case 6: 
        return COLORS.YELLOW;
      case 7:
      case 8: 
      case 9:
      case 10:
        return COLORS.GREEN;
      default:
        return COLORS.GREY;
    }

  }

  isAboveRating(index: number): boolean {
    // returns whether or not the selected index is above ,the current rating
    // function is called from the getColor function.

    return index> this.rating;
  }

}

enum COLORS {
  GREY = "#E0E0E0",
  GREEN = "#76FF03",
  YELLOW = "#FFCA28",
  RED = "#DD2C00"
}

I declared the component in the home.module.ts like this:

import { RatingComponent } from '../rating/rating.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage, RatingComponent ],
  schemas: []
})

this is my home.component.ts:

import { Component, ViewChild } from '@angular/core';
import { FBServiceService } from '../services/fbservice.service';
import { Router } from '@angular/router';
import { IonSlides, IonInfiniteScroll } from '@ionic/angular';
import * as CanvasJS from '../../assets/canvasjs-2.2/canvasjs.min.js';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
    @ViewChild('dynamicList') dynamicList;
    @ViewChild('SwipedTabsSlider') SwipedTabsSlider: IonSlides;
    @ViewChild('infiniteScroll') ionInfiniteScroll: IonInfiniteScroll;

    SwipedTabsIndicator: any = null;
    tabs = ["selectTab(0)", "selectTab(1)"];
    public category: any = "0";
    ntabs = 2;

    listado=[];

    listadoPanel=[];

    constructor(
      private FBService: FBServiceService,
      private router: Router
    ){

    }

    ionViewDidEnter(){
      this.FBService.leeNotas()
      .subscribe((querySnapshot) => {
        this.listado=[];
        querySnapshot.forEach(doc => {

          this.listado.push({id: doc.id,... doc.data()});

        });

        this.listadoPanel = this.listado;

        this.SwipedTabsIndicator = document.getElementById("indicator");

        let chart = new CanvasJS.Chart("chartContainer", {
          animationEnabled: true,
          title: {
            text: "Tier List "
          },
          axisX: {
            interval: 1
          },
          axisY: {
            title: "Points",
            scaleBreaks: {
              type: "wavy",
              customBreaks: [{
                startValue: 80,
                endValue: 210
                },
                {
                  startValue: 230,
                  endValue: 600
                }
            ]}
          },
          data: [{
            type: "bar",
            toolTipContent: "<img src=\"https://canvasjs.com/wp-content/uploads/images/gallery/javascript-column-bar-charts/\"{url}\"\" style=\"width:40px; height:20px;\"> <b>{label}</b><br>Budget: ${y}bn<br>{gdp}% of GDP",
            dataPoints: [
              { label: "Samus", y: 17.8, gdp: 5.8, url: "israel.png" },
              { label: "Pacman", y: 22.8, gdp: 5.7, url: "uae.png" },
              { label: "Canela", y: 22.8, gdp: 1.3, url: "brazil.png"},
              { label: "Zelda", y: 24.3, gdp: 2.0, url: "australia.png" },
              { label: "Sonic", y: 36.8, gdp: 2.7, url: "skorea.png" },
              { label: "Mario", y: 41.1, gdp: 1.2, url: "germany.png" },
              { label: "Luigi", y: 46.1, gdp: 1.0, url: "japan.png" },
              { label: "Kirby", y: 48.3, gdp: 1.9, url: "uk.png" },
              { label: "Ridley", y: 55.9, gdp: 2.5, url: "india.png" },
              { label: "Cloud", y: 69.2, gdp: 5.3, url: "russia.png" },
              { label: "Ike", y: 215.7, gdp: 1.9, url: "china.png" },
              { label: "Incineroar", y: 611.2, gdp: 3.3, url: "us.png" },
              { label: "Samus", y: 17.8, gdp: 5.8, url: "israel.png" },
              { label: "Pacman", y: 22.8, gdp: 5.7, url: "uae.png" },
              { label: "Canela", y: 22.8, gdp: 1.3, url: "brazil.png"},
              { label: "Zelda", y: 24.3, gdp: 2.0, url: "australia.png" },
              { label: "Sonic", y: 36.8, gdp: 2.7, url: "skorea.png" },
              { label: "Mario", y: 41.1, gdp: 1.2, url: "germany.png" },
              { label: "Luigi", y: 46.1, gdp: 1.0, url: "japan.png" },
              { label: "Kirby", y: 48.3, gdp: 1.9, url: "uk.png" },
              { label: "Ridley", y: 55.9, gdp: 2.5, url: "india.png" },
              { label: "Cloud", y: 69.2, gdp: 5.3, url: "russia.png" },
              { label: "Ike", y: 215.7, gdp: 1.9, url: "china.png" },
              { label: "Incineroar", y: 611.2, gdp: 3.3, url: "us.png" }
            ]
          }]
        });
        chart.render();

      })
    }

    ionViewWillEnter() {
      this.category = "0";
      this.SwipedTabsSlider.length().then(l => {  //no sería necesario aquí, solo en ngOnInit
        this.ntabs = l;
      });
    }

    doRefresh(refresher){
      this.FBService.leeNotas()
      .subscribe(querySnapshot => {
        this.listado = [];

        querySnapshot.forEach((doc) => {
          this.listado.push({id:doc.id,...doc.data()});
        });
        this.listadoPanel = this.listado;

        refresher.target.complete();
      });
    }

    /* El método que permite actualizar el indicado cuando se cambia de slide*/
  updateIndicatorPosition() {
    this.SwipedTabsSlider.getActiveIndex().then(i => {
      if (this.ntabs > i) {  // this condition is to avoid passing to incorrect index
        this.SwipedTabsIndicator.style.webkitTransform = 'translate3d(' + (i * 100) + '%,0,0)';
      }
    });
  }
  /* El método que anima la "rayita" mientras nos estamos deslizando por el slide*/
  animateIndicator(e) {
    //console.log(e.target.swiper.progress);
    if (this.SwipedTabsIndicator)
      this.SwipedTabsIndicator.style.webkitTransform = 'translate3d(' +
        ((e.target.swiper.progress * (this.ntabs - 1)) * 100) + '%,0,0)';
  }



  }

Answer 1

In this case you can't bind rating likie this: [(rating)]="rating"

You have to listen Emitter separatly:

<rating [rating]="rating" (ratingChange)="someFunction($event)"> </rating>

Answer 2

尝试以下将 functionx 更改为父组件中函数的名称。

<rating [rating]="rating" (ratingChange)="functionx($event)"> </rating>

Answer 3

You are inputing the rating to your component so that would be:

<rating [rating]="rating".../>

Now since you want to listen to the ratingChange event. You need to do it like this:

<rating [rating]="rating" (ratingChange)="parentFunc($event)"> </rating>

So whenever the ratingChange is emitted, the parentFunc on the parent component will be triggered.