Question

我必须折叠展开重复元素，为此我尝试在模板中使用局部变量，其范围将用于ngFor。我可以通过以下方式在角度1.x中执行此操作。但我想在Angular 2.x

中实现相同的功能

Angular 1.x实施（可行）

<div ng-repeat="item in items" ng-init="expand=false" ng-click="expand=!expand">
  <div ng-if="!expand">Small text</div>
  <div ng-if="expand">Expanded text</div>
</div>

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

我尝试在Angular2中使用它但是它给出了错误：“没有导出'false'”。

<div *ngFor="let item of items" #expand="false">
  <div *ngIf="!expand">Small text</div>
  <div *ngIf="expand">Expanded text</div>
</div>

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

Answer 1

在Angular 1中，当您使用expand时，它不是模板的本地变量，它是由ng-init="expand=false"在本地$scope上为每个{{1}创建的属性项目。 Angular不具有可在模板中使用的本地范围和ngFor的等效项。

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

ng-init

关于模板参考

在Angular中使用这样的结构时：

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。如果您这样使用它：

ElementRef

Angular希望将指令#expand="false"绑定到false模板变量而不是#expand，但由于没有，它会抛出错误ElementRef

Answer 2

您必须使用click事件来设置值

<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 2中的元素级局部变量

2 个答案:

关于模板参考