离子/角度选择触发元件

Question

我是Ionic和Angular的新手，我不能做这样简单的事情。

我得到了一个数组，里面装满了数据。我正在视图中打印出来。在每一行中，我都插入了一个带有星号的按钮，用户可以在其中收藏这个按钮。我想要的是，被点击的星号应该得到一个具有不同样式的特定 css 类。在html/jquery中，我只会写：

onclick=myfunc(this)

然后在jquery中：

function myfunc(elem){
    elem.addClass("newClass");
}

但是在 Angular 中，我需要这样写：

<div class="">
  <button (click)="myfunc(elem)"><ion-icon name="ios-star-outline"></ion-icon></button>
</div>

然后在构造函数之后的 ts 文件中：

save_printer(elem){
    elem.addClass("favorite");
}

如何只向触发按钮添加类？ 我还有其他 20 个按钮...

Answer 1

请浏览 plunker 解决方案

https://plnkr.co/edit/h8f71Pfo5FG7arwXfwsB

import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="let ele of tempArr; let i = index">
      {{ele.id}} &nbsp; 
      <span (click)="select(i)"> 
      <i class="fa fa-star-o" aria-hidden="true" 
      [ngClass]="{'colorStar': ele.isUpvoted}"></i> </
      span>
    </div>
  `,
})
export class App {
  name:string;
  tempArr = [
    {
      id : 1,
      isUpvoted : false
    },
        {
      id : 2,
      isUpvoted : false
    },
        {
      id : 3,
      isUpvoted : false
    },
        {
      id : 4,
      isUpvoted : false
    },
        {
      id : 5,
      isUpvoted : false
    },
        {
      id : 6,
      isUpvoted : false
    },
        {
      id : 7,
      isUpvoted : false
    },
        {
      id : 8,
      isUpvoted : false
    },
        {
      id : 9,
      isUpvoted : false
    },
        {
      id : 10,
      isUpvoted : false
    },
    ]
  constructor() {
    this.name = `Angular! v${VERSION.full}`;
  }
  select(index){
    console.log(index);
    this.tempArr[index].isUpvoted = !this.tempArr[index].isUpvoted;
    console.log(this.tempArr[index]);
  }
}
@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}