Question

根据Angular 2指令，我有一个问题。我想用Angular 2重新创建我的Angular 1应用程序，但是我遇到了一个指令。 Angular 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>

Angular 2指令

1 个答案: