Angular2没有渲染＆＃34;静态＆＃34;页面上的文字加载

Question

所以这有点难以解释所以我有sort video注释问题

似乎静态文本没有呈现（请参阅 H3标记）。像<div> Name: <span>John</span> </div> 这样的动态内容和循环中的东西似乎运行正常。据我所知，它发生在所有页面上。

我使用AngularClass回购作为起点。

直接加载页面或刷新页面时（F5等）

当它通过另一个页面的链接访问时

模板文件

{{ foo.bar }}

控制台中没有错误。

修改

另一张可能清除实际问题的图片。请注意，HTML标题中包含内容，其内容为硬编码。但它没有显示出来。

Answer 1

1）第一个解决方案，应该是 *ngIf ，而不是 ng-if

<div class="row" *ngIf="gps && gps.location">                    //<<<===here
    <div class="col-md-4">
        <strong>Time:</strong> {{ gps.location.timestamp }}
    </div>
    <div class="col-md-4">
        <strong>Latitude:</strong> {{ gps.location.latitude }}
    </div>
    <div class="col-md-4">
        <strong>Longitude:</strong> {{ gps.location.longitude }}
    </div>
</div>

2）第二个解决方案，请勿使用 *ngIf 并使用 ?. 运算符，如下所示，

<div class="row" > 
    <div class="col-md-4" >
        <strong>Time:</strong> {{ gps?.location.timestamp }}      //<<<==here
    </div>
    <div class="col-md-4">
        <strong>Latitude:</strong> {{ gps?.location.latitude }}   //<<<==here
    </div>
    <div class="col-md-4">
        <strong>Longitude:</strong> {{ gps?.location.longitude }} //<<<==here
    </div>
</div>

Answer 2

我在Chrome上遇到了同样的问题，并通过删除在该元素上应用的font-size样式来修复它。不确定原因，可能是Chrome的错误。