Angular 2：如何访问动态创建的模板变量

Question

我有一个应用程序，可从数据库中加载json并将响应分发到手风琴界面。 我的目标是将第一个响应显示为扩展，将所有其他响应显示为封闭。

<div #areaLevel class="parent_div" *ngFor="let level_1 of [1,2,3]">
   <div class="chlid_div" [hidden]="areaLevel.expanded">

        <div class="button" [class.closed]="areaLevel.expanded" (click)="areaLevel.expanded = !areaLevel.expanded">
            <div class="plus">+</div>
            <div class="minus">-</div>
        </div>

        {{ level_1.content }}

   </div>
</div>

我应该如何编辑“ areaLevel.expanded”变量，以便在加载时，第一个元素为true，其他元素为false。 最好的解决方案是仅使用模板，但也欢迎其他建议。

Answer 1

我不确定我会100％关注您的问题

通常不认为从模板编辑数据是一种好习惯。 这是因为它可能的Angular首先会渲染模板，然后运行缺少更改的模板。 因此可能导致错误。

我认为您可能希望跟踪其是否在您正在遍历的对象上扩展

因此在您的组件中，您的ngInit可能看起来像

levels = [];

constructor(private levelService: LevelService) { }

onInit() {

   levelService.subscribute(data=> {

      for (let i = 0; i < data.length; i++) {
          levels.push({
            content: data.content,
            expanded: false;
          })
      }

      levels[0].expanded = true;

   });
}

然后您的模板：

<div class="parent_div" *ngFor="let level_1 of levels">
   <div class="chlid_div" [hidden]="level.expanded">

        <div class="button" [class.closed]="level.expanded" (click)="level.expanded = !level.expanded">
            <div class="plus">+</div>
            <div class="minus">-</div>
        </div>

        {{ level.content }}

   </div>
</div>