Question

我正在尝试在Angular 6中加载几个小部件，并创建了一个加载符号svg，并使用以下逻辑隐藏和显示该加载div，直到所有小部件都加载完毕，在firefox中，该加载svg正常显示，但是在chrome和IE中，直到所有小部件都加载后，空白窗口才会出现，如果我将svg替换为text，即使在Chrome中也不会出现，这是代码

app.component.html

 <div [hidden]="counter >= 3" class="loading-div"> 
       <img src="assets/icons/loading-bee.svg" type="image/svg+xml"/>
       <span class="loading-bee-txt">Please wait while we retrieve the data.</span>
</div>
  <div>
    <wgt-financials (initialized)="counter = counter + 1"></wgt-financials>
    <wgt-financials (initialized)="counter = counter + 1"></wgt-financials>
    <wgt-financials (initialized)="counter = counter + 1"></wgt-financials>
  </div>
<div>

这在Firefox中完美运行，但在Chrome或IE中则无法正常运行。

Answer 1

您不需要在img标签中添加“类型”。尝试删除“类型”。

<img src="assets/icons/loading-bee.svg"/>

也可以使用[hidden]来使用* ngIf

* ng如果vs [隐藏]

* ngIf有效地从DOM中删除了其内容，而[hidden]修改了显示属性，并且仅指示浏览器不显示内容，但DOM仍然包含该内容。

<div *ngIf="counter !> 3 && counter != 3" class="loading-div"> 
   <img src="assets/icons/loading-bee.svg"/>
   <span class="loading-bee-txt">Please wait while we retrieve the data. 
   </span>
</div>

Angular 6，正在加载SVG不会出现在Chrome中

1 个答案: