Angular 2，ngFor爲每次迭代創建一個新的上下文？

大家好！在Angular 2中，* ng爲每次迭代創建一個新的上下文？像ng-repeat在角js？中。我需要在* ngFor中更改一個變量值，但是所有迭代的值都會改變。例如：Angular 2，ngFor爲每次迭代創建一個新的上下文？

<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>

當我點擊的標籤上，isCollapsed變化，從虛假到真實的，但isCollpsed所有迭代變化。你可以給我一個建議，做點擊和摺疊只有一個標籤？

謝謝

來源

2017-05-15 Jhonatan Alarcon

我認爲必須有一種方法來唯一標識哪個div要摺疊。如果標籤始終是唯一的，可以使用'isCollapsed + label'。 – Tamas

'label'和'product'在每個上下文中都有變化，但是來自外部的值（如果您訪問組件類中的成員，則每個上下文的值相同。 –

add isCollapsed作爲標籤使用的類的屬性。

在你的組件，如果你的「標籤」是個數字陣列，即如果當前是：

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>

來源

2017-05-15 19:36:23

謝謝，這是一個很好的解決方案:) –

請標記它作爲正確的答案，如果它的工作！ –

它不應該是'label.isCollapsed =！label.isCollapsed'嗎？ – developer033

您可以定義組件一個字段index名稱，並將其設置爲null和使用$index這樣的：

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

，並定義toggleCollapsed（指數）爲跟着：

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

來源

2017-05-15 20:02:13

Angular 2，ngFor爲每次迭代創建一個新的上下文？

回答

相關問題