Question

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

Principal principal

我应该如何进行编辑＆＃34; areaLevel.expanded＆＃34;变量，因此，在加载时，对于第一个元素，它将是真的，对于其他元素则是false。优选的解决方案是仅使用模板，但也欢迎其他建议。

Answer 1

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

通常不认为从模板编辑数据的良好做法。这是因为它可能会首先渲染模板，然后运行模板而忽略您的更改。所以它可能导致错误。

我想你想跟踪它是否扩展了你正在循环的对象

所以在您的组件中，您的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>

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

1 个答案: