Question

所以，假设我有这个ngFor循环：

<ng-container*ngFor="let rate of [1,2,3,4,5]">
    <div (click)="change()">{{myVariable}}</div>
</ng-container>

我在模板中显示变量5次，我想要做的是在点击之后更改变量，单击之前和之前的变量将被更改，然后下一个保持不变。当我有：

export class StarRatingComponent {
  myVariable = 'a';

  change() {
    this.myVariable = "b";
  }
}

如果我点击a，则所有内容都会更改为b。如何仅对点击的项目和之前的项目应用此更改？所以对于例如。从aaaaa到bbbaa？

Answer 1

只需传递所选评级的值即可。

这样的事情可行：

<ng-container*ngFor="let rate of [1,2,3,4,5]">
  <div (click)="change(myVariable)">{{myVariable}}</div>
</ng-container>

然后在组件中，按索引跟踪那些：

export class RatingCmp {
  rating: string = '1';
  change(rating) {
    this.rating = rating;
  }
}

Answer 2

尝试使用以下方法：

<ng-container*ngFor="let value of values; index as i">
    <div (click)="change(i)">{{value}}</div>
</ng-container>

export class StarRatingComponent {
  values = this.generateValues('a',5);

  private generateValues(val: string, times: number): string[]{
    const result: string[] = [];
    while(--times >= 0){
       result.push(val);
    }
    return result;
  } 

  change(index: number) {
     while(index >= 0){
       this.values[index] = 'b';
       index--;
     }
  }
}

Angular - ngFor点击后更改变量

2 个答案: