Question

大家好！在Angular 2中，* ngFor为每次迭代创建一个新的上下文？像角度js中的ng-repeat一样？我需要更改* ngFor中的变量值，但所有迭代的值都会更改。例如：

＆＃13;

<div *ngFor="let label of labels">
    <div class="company"><a (click)="isCollapsed = !isCollapsed;isCollapsed ?                       labelStyle = {color: 'gray'}:labelStyle = {color: '#337ab7'}"                       [ngStyle]="labelStyle">{{label}}</a>
     </div>
     <div [ngbCollapse]="isCollapsed">
         <div class="item" *ngFor="let product of products">
            <div class="meta" *ngIf="product.year == label">
              <div class="details">
                <div [innerHTML]=product.reference></div>
              </div>
            </div>
         </div>
      </div>
</div>

＆＃13;

当我点击标签时， isCollapsed 会从false更改为true，但 isCollpsed 会更改所有迭代。你能给我一个关于点击和折叠一个标签的建议吗？

由于

Answer 1

将isCollapsed添加为标签使用的类的属性。

在您的组件中，如果您的标签是＆＃39;是一个数字数组，即如果它当前是：

labels: number[]

然后将其更改为

labels: MyLabel[]

在组件类之后添加一个名为MyLabel的模型，如：

class MyLabel{
   constructor(public year: number, public isCollapsed: boolean){}
}

然后在html中你可以使用它：

<div *ngFor="let label of labels">
<div class="company"><a (click)="label.isCollapsed = !label.isCollapsed                     labelStyle = {color: 'gray'}:labelStyle = {color: '#337ab7'}"                       [ngStyle]="labelStyle">{{label.year}}</a>
 </div>
 <div [ngbCollapse]="label.isCollapsed">
     <div class="item" *ngFor="let product of products">
        <div class="meta" *ngIf="product.year === label.year">
          <div class="details">
            <div [innerHTML]=product.reference></div>
          </div>
        </div>
     </div>
  </div>

Answer 2

您可以使用index名称在组件中定义一个字段，并将其设置为null并使用$index，如下所示：

<div class="company"><a (click)="toggleCollapsed($index) ? labelStyle = {color: 'gray'}:labelStyle = {color: '#337ab7'}"                       [ngStyle]="labelStyle">{{label.year}}</a>

定义toggleCollapsed（index）如下：

toggleCollapsed(index : number){
    this.index != index ? this.index = index : this.index = null;
    return this.index == index;
}

Angular 2，ngFor为每次迭代创建一个新的上下文？

2 个答案: