Angular 2指令

Question

根据Angular 2指令，我有一个问题。我想用Angular 2重新创建我的Angular 1应用程序，但是我被一个指令卡住了。角度1中的那个看起来像这样：

app.directive('starRating', function () {
  return {
    restrict: 'A',
    template:   '<ul class="rating">' +
                    '<li ng-repeat="star in stars">' +
                        '<span class="glyphicon" ng-class="star.class" aria-hidden="true">' +
                    '</li>' +
                '</ul>',
    scope: {
        ratingValue: '=',
        max: '='
    },
    link: function (scope, elem, attrs) {
        scope.stars = [];
        for (var i = 0; i < scope.max; i++) {
            if(i < scope.ratingValue){
                scope.stars.push({
                    class: "glyphicon-star"
                });
            } else {
                scope.stars.push({
                    class: "glyphicon-star gray"
                });
            }
        }
    }
  }
});

我在我的html文件中这样调用它：

<div star-rating rating-value="movie.rating" max="5" ></div>

它只是一个有名字和等级的桑普斯电影制片人。通过指令，我只想创建5颗星，根据评级，应该填充的星的数量。

在Angular 2中也可以这样做吗？如果是这样的话，会怎么做？我找不到任何合适的代码示例或教程。

谢谢彼得

Answer 1

好的，我找到了一个合适的解决方案：

在组件中，我刚刚添加了一个函数

getClass(index, rating) {
    if (index < rating) {
        return 'glyphicon-star';
    } else {
       return 'glyphicon-star-empty gray';
    }
}

在我的HTML中，我这样称呼它：

<div class="col-lg-3">
   <ul class="rating">
       <li *ngFor="let n of [0,1,2,3,4]; let i = index">
           <span class="glyphicon" [ngClass]="getClass(i, rating)"></span>
       </li>
   </ul>
</div>