时间戳

首页 > 解决方案 > 动态创建的变量没有作用域？

angular - 动态创建的变量没有作用域？

问题描述

所以以前在 Angular 1.X 中，我习惯于在 html 端创建局部变量。

它通常看起来像这样（AngularJS）：

<div class="parentContainer" ng-repeat="error in $ctrl.systemErrorMessages>
    <div ng-click="showHide=(showHide ? false : true)">
                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        Click me to toggle all selectors in the same hierarchical-level (scope) as me.
    </div>

    <div ng-if="showHide"> {{error.message}} </div>
</div>

上面的代码将创建变量并显示里面的 div。

但是，如果我在 Angular 1.X 中将它放在ng-repeat标签中，那么该变量将是其范围的本地变量。假设有 50 个条目systemErrMessages，当我现在单击切换 div 时，所有 50 个条目都在做出反应……以前是这样 - 只有我单击了谁切换 div 的消息；反应过来……

Angular2 似乎打破了 ngFor 的范围，并影响了所有元素。

我正在尝试什么（Angular 2）：

<div *ngFor="let error of systemErrMessages">
     <div class="item" [hidden]="showHide">
        ErrorMessage: {{error}}
     </div>
     <div (click)="showHide=(showHide ? false : true)">TOGGLE above</div>
                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
</div>

澄清（TL；DR）：

HTML 结构（ngFor 生成的内容）：

<div class="parentContainer">
    <div class="item">
        <div class="information" [hidden]="showHide">lorem ipsum</div>
        <div (click)="showHide=(showHide ? false : true)">TOGGLE</div>
    </div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>

当我在 angular2 中单击 TOGGLE 时，所有元素都是可见的。

在 AngularJS 中，只有' .item s.information是可见的。

是否有可能get the same behaviour as in 1.X ?

标签： angular

解决方案

角^7.xx

如果要在模板中创建动态变量，只需创建它：

<div *ngFor="let error of systemErrMessages; let showHide = 'showHide'">
                                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^
     <div class="item" [hidden]="showHide">
        ErrorMessage: {{error}}
     </div>
     <div (click)="showHide = !showHide">TOGGLE above</div>
</div>

否则您的showHide变量将具有组件范围。

推荐阅读