Angular 当我选择course1时，右箭头应向下（仅适用于一个选定项目）

在这里，我创建了一个示例侧菜单。当iam选择一个项目时，右箭头应仅在一个项目中显示为向下箭头

但是，这是在ngFor。它适用于所有菜单项。我想要我已经选择的，必须显示为向下箭头。这里我也附上图片。 任何人都可以格式化代码

course.component.ts

此处app.component.ts

---

我不确定您的用例是否声明可以有一个或多个最喜欢的课程。 代码的问题在于如何处理isFavorite，它在ctor中分配了数组，然后将其视为所有课程通用的布尔标志，这反过来又控制所有图示符，因为它是绑定到所有课程图示符的单个变量

course.component.ts单个fav course更新

---

我不确定您的用例是否声明可以有一个或多个最喜欢的课程。 代码的问题在于如何处理isFavorite，它在ctor中分配了数组，然后将其视为所有课程通用的布尔标志，这反过来又控制所有图示符，因为它是绑定到所有课程图示符的单个变量

course.component.ts单个fav course更新

---

那些都不行，兄弟。显示错误。请给我一些其他的解决办法。我需要的是，当我点击course1右箭头应该显示下行子菜单。编辑后签出代码。。。我修好了我的和你的手推车，它们坏了，兄弟。显示错误。请给我一些其他的解决办法。我需要的是，当我点击course1右箭头应该显示下行子菜单。编辑后签出代码。。。我修正了我的和你的错误语法

import { Component } from 'angular2/core' 
import { CourseService } from './course.service'

 @Component({
     selector: 'courses',
     template: `       
     <h2>Courses</h2>
     {{title}}
     <ul>
         <li *ngFor="#course of courses; #i = index">
         <a (click)="onClick(course)">
            <span><i class="glyphicon" [class.glyphicon-chevron-down]="!isFavorite" 
              [class.glyphicon-chevron-right]="isFavorite"></i> {{ course }} </span>   
         </a>       
         </li>
     </ul>  
     `,
     providers: [CourseService] }) 

 export class CoursesComponent {
     title = "";
     courses;
     isFavorite;

     constructor(courseService: CourseService) {
         this.courses = courseService.getCourses();
         this.isFavorite = new Array(this.courses.length);
     }

     onClick(course) {
         console.log("clicked", course);
         this.isFavorite = !this.isFavorite;
     } 
 }

import { Component } from 'angular2/core'; 
import { CoursesComponent } from './courses.component'

 @Component({
     selector: 'my-app',
     template: `<h1>Side Menu</h1>
     <courses></courses>
     `,
     styles: [`
         .glyphicon{
             font-size:26px;
         }
     `],
     directives: [CoursesComponent] }) 

  export class AppComponent {
     post = {
         title: "Title",
         isFavorite: true
     }
     onFavoriteChange($event) {
         console.log($event);
     } 
 }

import { Component } from '@angular2/core'
import { CourseService } from './course.service'

@Component({
    selector: 'courses',
    template: `
     <h2>Courses</h2>
     {{title}}
     <ul>
         <li *ngFor="let course of courses">
            <a (click)="onClick(course)">
                <span>
                    <i class="glyphicon {{ favorite === course ? 'glyphicon-chevron-right' : 'glyphicon-chevron-down' }}"></i>
                    {{ course }}
                </span>   
            </a>
         </li>
     </ul>  
     `,
    providers: [CourseService]
})

export class CoursesComponent {
    title = "";
    courses; // : Course[];
    favorite = null;

    constructor(courseService: CourseService) {
        this.courses = courseService.getCourses();
    }

    onClick(course) {
        console.log("clicked", course);

        if (this.favorite === course) { // same clicked twice in a row, deselect
            this.favorite = null;
        } else { // new one selected, replace
            this.favorite = course;
        }
    }
}

import { Component } from '@angular2/core'
import { CourseService } from './course.service'

@Component({
    selector: 'courses',
    template: `
     <h2>Courses</h2>
     {{title}}
     <ul>
         <li *ngFor="let course of courses">
            <a (click)="onClick(course)">
                <span>
                    <i class="glyphicon {{ isFavorite(course) ? 'glyphicon-chevron-right' : 'glyphicon-chevron-down' }}"></i>
                    {{ course }}
                </span>   
            </a>
         </li>
     </ul>  
     `,
    providers: [CourseService]
})

export class CoursesComponent {
    title = "";
    courses; // : Course[];
    favorites = []; // : Course[];

    constructor(courseService: CourseService) {
        this.courses = courseService.getCourses();
    }

    isFavorite(course): boolean {
        return this.favorites.indexOf(course) !== -1;
    }

    onClick(course) {
        console.log("clicked", course);

        if (this.isFavorite(course)) { // found it! remove
            this.favorites = this.favorites.filter(c => c !== course); // or this.favorites.splice(favIdx, 1);
        } else { // not found? add
            this.favorites.push(course);
        }
    }
}

$ ng version
angular-cli: 1.0.0-beta.24
node: 7.2.1
os: win32 x64
@angular/common: 2.4.4
@angular/compiler: 2.4.4
@angular/core: 2.4.4
@angular/forms: 2.4.4
@angular/http: 2.4.4
@angular/platform-browser: 2.4.4
@angular/platform-browser-dynamic: 2.4.4
@angular/router: 3.4.4
@angular/compiler-cli: 2.4.4