Angular 2:[隐藏]和* NgIf不工作?

时间:2017-06-01 12:27:59

标签: javascript angular

因此,如果数据可用,我会让此表显示绿色圆圈。在gegevensAanwezig中,您有一个学校名称和一些布尔(Entreetoets,Eindtoets等),以显示数据是否可用。

        <tr *ngFor="let g of gegegevensAanwezig">
            <td>{{ g.brinCode }}</td>
            <td>{{ g.schoolNaam }}</td>
            <td></td>
            <td></td>
            <td><div class="circle" [hidden]="!g.Entreetoets">  </div> </td>
            <td><div class="circle" [hidden]="!g.Eindtoets">  </div></td>
            <td><div class="circle" [hidden]="!g.BLez">  </div></td>
            <td><div class="circle" [hidden]="!g.BLui">  </div></td>
            <td><div class="circle" [hidden]="!g.DMT">  </div></td>
            <td><div class="circle" [hidden]="!g.ORD">  </div></td>
            <td><div class="circle" [hidden]="!g.RW">  </div></td>
            <td><div class="circle" [hidden]="!g.SP">  </div></td>
            <td><div class="circle" [hidden]="!g.SV">  </div></td>
            <td><div class="circle" [hidden]="!g.TL">  </div></td>
            <td><div class="circle" [hidden]="!g.TV">  </div></td>
            <td><div class="circle" [hidden]="!g.TVK">  </div></td>
            <td><div class="circle" [hidden]="!g.WS">  </div></td>
        </tr>

g.brinCode&amp; g.schoolNaam正在工作,他们显示学校名称和学校代码就好了。但[hidden]*NgIf无效。显示所有圆圈或显示任何内容。

这是因为Angular-universal在浏览器提供数据后加载数据时在后端呈现视图吗?

我在提供视图后使用if (isBrowser)加载数据,因为我需要localStorage

截图:enter image description here 如果布尔值为真或假,则应使用一些绿色圆圈填充空白区域

console.log(gegevensAanwezig)enter image description here

2 个答案:

答案 0 :(得分:2)

事实证明,角度不会识别资本变量.. 我将所有内容都更改为小写并且有效..

答案 1 :(得分:1)

只需检查

<div *ngIf = "gegegevensAanwezig">
   //then procced with the ngFor
</div

在评论后更新

尝试将其添加到样式表中,同时检查隐藏属性是否附加到dom中的元素。

[hidden] {
  display: none;
}