如何使用角度7材质图标按钮进行星级评定？

Question

场景： 我已经使用材质图标按钮创建了评级选项，如下所示：

预期结果：

• 我想将 array:14 [ 37 => array:5 [ "id" => 37 "name" => "Red abya" "alias" => "red-abya" "is_featured" => 0 ] 38 => array:5 [ "id" => 38 "name" => "Black Dress" "alias" => "black-dress" "is_featured" => 0 ]"is_featured" => 0 ] 1 => array:6 [ "id" => 1 "name" => "Abayas" "alias" => "abayas" "is_featured" => 1 "sub_categories" => array:2 [ 0 => array:5 [ "id" => 37 "name" => "Red abya" "alias" => "red-abya" "is_featured" => 0 ] 1 => array:5 [ "id" => 36 "name" => "White abaya" "alias" => "white-abaya" "is_featured" => 0 ] ] ] 25 => array:5 [ "id" => 25 "name" => "Discount" "alias" => "discount" "is_featured" => 0 ] ] 的颜色更改为要选择的用户数量：

• 根据用户选择，我需要采用3、3.5、4之类的值。

DEMO

Answer 1

我在Angular 7应用程序中实现了类似Amazon的评分系统（与您的要求相同）。我已经使用了这个sample。这看起来很简单，更少的代码行，您可以重用该小部件。

演示网址：https://angular-material-star-rating.stackblitz.io