Angular 错误：模板分析错误：Can'；t绑定到'；评级'；因为它不是'；t'的已知属性；评级'；

我正在尝试在一个组件中创建一个评级系统，以便在我的应用程序的其他页面中导入它

这是home.html中的一段代码，它给了我一个错误（我想要评级的地方）：

这是我的家。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"
}

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)';
  }



  }

---

在这种情况下，您不能像这样绑定评级：[（评级）]=“评级”

你必须分心倾听：

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

试试下面的方法 将functionx更改为父组件中函数的名称

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

---

您正在向组件输入

评级

，以便：

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

---

因此，每当发出

ratingChange

时，就会触发父组件上的

parentFunc

。

尝试：

[rating]=“rating”

@PrashantPimpale它会给我同样的错误。您能提供StackBlitz吗？是否还要查看父组件代码

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

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

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

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