Angular 2中的元素级局部变量

我必须折叠扩展重复的元素，因为我尝试在模板中使用局部变量，其作用域将是ngFor。 我可以用1.x的角度，用下面的方法。但我想在Angular 2.x中实现同样的功能

Angular 1.x实现（它可以正常工作）

小文本
扩展文本

Angular 2.x实现（不起作用）

我试图用Angular2实现同样的功能，但它给出了一个错误：“No exportas代表‘false’”

小文本
扩展文本

---

Angular 2模板中元素级局部变量的正确实现方式是什么？

您必须使用click event设置值

<div *ngFor="let item of items" (click)="expand=!expand">
  <div *ngIf="!expand">Small text</div>
  <div *ngIf="expand">Expanded text</div>
</div>

export class item {
  expand:boolean
}

小文本
扩展文本
导出类项目{
展开：布尔
}

在Angular 1中，当您使用

expand

时，它不是模板的局部变量，而是由

ng init=“expand=false”

在局部

$scope

上为每个

ngFor

项创建的属性。Angular没有可在模板中使用的本地作用域和

ng init

的等效项

如果要控制每个项目的可见性，则唯一的选项是在正在迭代的项目上定义属性：

items = [{value: 1}, {value: 2}, {value: 3}];

<div *ngFor="let item of items">
    <span (click)="item.expand=!item.expand">
        show
        <span *ngIf="item.expand">{{item.value}}</span>
    </span>
</div>

它确实创建了一个本地模板变量

#expand

，但是它没有指向控制器/类中的变量，而是指向

ElementRef

。如果您这样使用它：

#expand="false"

---

Angular希望有一个指令

false

绑定到

#expand

模板变量，而不是

ElementRef

，但由于没有指令，它会抛出错误

“不导出'false'。

我完全同意您的解释。谢谢，有没有办法克服这个问题？什么问题？只是不要使用

#expand

模板变量，正如我在回答的开头所示。已经尝试过的，expand的值在所有ngFor元素中都是相同的。当我点击一个元素时，它也会反映在另一个元素上。@LaxmikantDange，啊，是的，这是因为在Angular.js中，每个

ngFor

项都有局部作用域。在角度上没有等价物。您的唯一选项是向

ngFor

中显示的项目添加属性

展开

，并对其进行更新。我更新了我的答案。变量expand对于ngfor中的所有项目都是通用的。@LaxmikantDange，上面的代码有什么错误？expand的值在所有ngfor元素中都是相同的。当我点击一个元素时，它会反映在另一个元素上。请参考：@LaxmikantDange，然后您需要在项目中有expand属性才能使其工作。请查看更新的答案

items = [{value: 1}, {value: 2}, {value: 3}];

<div *ngFor="let item of items">
    <span (click)="item.expand=!item.expand">
        show
        <span *ngIf="item.expand">{{item.value}}</span>
    </span>
</div>

#expand

#expand="false"