如何在Angular 2中使用NgFor来指示另一个html对象上的活动项？

我正在使用NgFor迭代一个集合：

this.articles = [
    {
        id: 1,
        title: “Tile 1“,
        summary: “First Article“
    },
    {
        id: 2,
        title: “title 2“,
        summary: “Summary 2“
    },
    {
        id: 3,
        title: "Title 3”,
        summary: “Summary 3“
    },
    {
        id: 4,
        title: “Title 4“,
        summary: “Summary 4”
    }
];


<p class="controls">
    &laquo;
    <a (click)="showPrevArticle()">Previous article</a>
    &mdash;
    <a (click)="showNextArticle()">Next article</a>
    &raquo;
</p>
<div class="container">
    <template ngFor let-article [ngForOf]="[ selectedArticle ]" let-i="index">
        <ol class="article-indicators text"  [hidden]="articles.length <= 1">
              <li  *ngFor="let article of articles ; let i = index" [class.active]="selectedBundle === true" (click)="select(article)"><strong>id: </strong>{{i}} </li>
        </ol>

        <div [@articleAnimation]="orientation" class="article">
            <div class="name">
                {{ article.title }}
            </div>
            <div class="avatar">id is: <strong>{{i}}</strong></div>
            <div class="meta">
               {{ article.summary }}
            </div>
        </div>
    </template>
</div>

我想要一个项目列表，以突出显示当前正在上面的“文章”div中显示的文章 .

<ol class="article-indicators text"  [hidden]="articles.length <= 1">
                  <li  *ngFor="let article of articles ; let i = index" [class.active]="selectedBundle === true" (click)="select(article)"><strong>id: </strong>{{i}} </li>
            </ol>

由于数据不是通过路由器提供的，我如何使用等效的 [routerLinkActive]="['active']" 来显示哪个文章被推到了前面？

///编辑

组件代码：

这可能更好地解释：

一开始我设置了动画方向：

type Orientation = ( "prev" | "next" | "none" );

我的组件代码：

@Component({
  selector: 'app-article-01',
  animations: [
        trigger(
            "articleAnimation",
            [
                transition(
                    "void => prev", // ---> Entering --->
                    [
                        // Maintain a zIndex of 2 throughout the ENTIRE animation
                        style({
                            left: -100,
                            opacity: 0.0,
                            zIndex: 2
                        }),
                        animate(
                            "200ms ease-in-out",
                            style({
                                left: 0,
                                opacity: 1.0,
                                zIndex: 2
                            })
                        )
                    ]
                ),
                transition(
                    "prev => void", // ---> Leaving --->
                    [
                        animate(
                            "200ms ease-in-out",
                            style({
                                left: 100,
                                opacity: 0.0
                            })
                        )
                    ]
                ),
                transition(
                    "void => next", // <--- Entering <---
                    [
                        // Maintain a zIndex of 2 throughout the ENTIRE
                        // animation (but not after the animation)
                        style({
                            left: 100,
                            opacity: 0.0,
                            zIndex: 2
                        }),
                        animate(
                            "200ms ease-in-out",
                            style({
                                left: 0,
                                opacity: 1.0,
                                zIndex: 2
                            })
                        )
                    ]
                ),
                transition(
                    "next => void", // <--- Leaving <---
                    [
                        animate(
                            "200ms ease-in-out",
                            style({
                                left: -100,
                                opacity: 0.0
                            })
                        )
                    ]
                )
            ]
        )
    ],
  templateUrl: './article-01.component.html',
  styleUrls: ['./article-01.component.scss']
})

导出我的课程并创建我的文章集合：

export class article01Component implements OnInit {
 //indicator states
  selectedArticleId:number;

  isSelected(article): boolean {
       return article.id === this.selectedArticleId;
   }

  public orientation: Orientation;
  public selectedArticle: article;

  private changeDetectorRef: ChangeDetectorRef;
  private articles: article[];

  constructor(changeDetectorRef: ChangeDetectorRef) { 

    this.changeDetectorRef = changeDetectorRef;
    this.orientation = "none";

     // Setup the articles collection.
        this.articles = [
            {
                id: 1,
                title: "Article 1 Heading",
                summary: "Summary for article 1"
            },
            {
                id: 2,
                title: "Article 2 Heading",
                summary: "Summary for article 2"            },
            {
                id: 3,
                title: "Article 3 Heading",
                summary: "Summary for article 3"            },
            {
                id: 4,
                title: "Artcile 4 Heading",
                summary: "Summary for article 4"
            }
        ];

          // Randomly(ish) select the initial article to display.
        this.selectedArticle = this.articles[ Math.floor( Math.random() * this.articles.length ) ];

  }

以前的按钮代码与指标的实现方法：

我循环到集合中的下一篇文章 .

public showNextArticle() : void {

    // Change the "state" of the animation trigger.
    this.orientation = "next";

    // Force the Template to apply the new animation state before we actually
    // change the rendered element view-model. If we don't force a change-detection,
    // the new [@orientation] state won't be applied prior to the "leave" transition;
    // which means that we won't be leaving from the "expected" state.
    this.changeDetectorRef.detectChanges();

    // Find the currently selected index.
    var index = this.articles.indexOf( this.selectedArticle );
    //THIS IS WRONG:highlight indicator, this is not picking up the correct id
    this.selectedArticleId = index;

    //this.indicatorState(newState)

    // Move the rendered element to the next index - this will cause the current item
    // to enter the ( "next" => "void" ) transition and this new item to enter the
    // ( "void" => "next" ) transition.
    this.selectedArticle = this.articles[ index + 1 ]
        ? this.articles[ index + 1 ]
        : this.articles[ 0 ]
    ;

}

我的指标

<ol class="article-indicators text"  [hidden]="articles.length <= 1">
          <li  *ngFor="let article of articles ; let i = index" [class.active]="isSelected(article)"  (click)="select(article)"><strong>id: </strong>{{i}} </li>
    </ol>

应用活动类的方式似乎存在问题，因为它是在随机的基础上进行的，而不是拾取当前的selectedArticle索引：

//查找当前选定的索引 .

var index = this.articles.indexOf( this.selectedArticle );

    this.selectedArticleId = index;


Select the bundle via the indicator (not working):

  public select(selectedArticle){

       selectedArticle.id = this.article.id //property of article does not exist on type 'ArticleComponent'
   }