將數據傳遞到 HTML 頁面（離子/角度）

Question

我需要一些幫助才能將評級值傳遞給 HTML 頁面。

配置文件.page.ts

logRatingChange(rating){
      //code to calculate avg rating

      rating = 4.5;
  }

簡介.page.html

<ionic4-star-rating #rating
                activeIcon = "ios-star"
                defaultIcon = "ios-star-outline"
                activeColor = "#488aff" 
                defaultColor = "#f4f4f4"
                halfStar = "true"
                readonly="false"
                rating= ""   <-----Passing the rating value here
                fontSize = "32px"
                (ratingChanged)="logRatingChange($event)">
</ionic4-star-rating>

我不確定如何將評級傳遞給 HTML 頁面中的組件。 很抱歉，如果這個問題太菜鳥了，因為我在網上找不到與此相關的任何內容。

非常感謝您的幫助。

Answer 1

您正在尋找 Angular 數據綁定： https://angular.io/guide/binding-syntax

語法是將 html 屬性包裝在方括號[propertyName]中：

<ionic4-star-rating #rating
                activeIcon = "ios-star"
                defaultIcon = "ios-star-outline"
                activeColor = "#488aff" 
                defaultColor = "#f4f4f4"
                halfStar = "true"
                readonly="false"
                [rating]= "rating"
                fontSize = "32px"
                (ratingChanged)="logRatingChange($event)">
</ionic4-star-rating>

或者您可以使用模板變量引用語法： {{varName}}

<ionic4-star-rating #rating
                activeIcon = "ios-star"
                defaultIcon = "ios-star-outline"
                activeColor = "#488aff" 
                defaultColor = "#f4f4f4"
                halfStar = "true"
                readonly="false"
                rating= "{{rating}}"
                fontSize = "32px"
                (ratingChanged)="logRatingChange($event)">
</ionic4-star-rating>

Answer 2

如果您有rating變量作為個人資料頁面 class，您可以使用

<ionic4-star-rating #rating
                activeIcon = "ios-star"
                defaultIcon = "ios-star-outline"
                activeColor = "#488aff" 
                defaultColor = "#f4f4f4"
                halfStar = "true"
                readonly="false"
                [rating]= "rating"
                fontSize = "32px"
                (ratingChanged)="logRatingChange($event)">
</ionic4-star-rating>