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> 

这只是一个somple movielist的名称和评级。通过指令，我想创建5颗星，根据评分，应该填充星星的数量。

在Angular 2中可以这样做吗？如果是这样，它将如何完成？我无法找到任何正确的代码示例或教程。

感谢 彼得

Answer 1

好，我发现自己一个合适的解决方案：

的成分，我只是在我的HTML附加功能

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

我这样称呼它：

<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>