前言

在做项目中，业务为页面加载中根据从后台传过来的不同数据情况来确定页面的button的样式，但是使用ngOnInit（）来加载方法，却一直显示找不到button的id，获取不到button。

原因

在ts中我是使用document.getElementById(“id”)，来获取button，但是是放在初始加载函数中即ngOnInit()中，所以判断页面初始加载函数和页面渲染是同时进行的，所以在实现初始加载函数的时候html页面并没有渲染完成，因此，不能找到button的id。

解决办法

解决办法超级多，下面整理一下我找到的解决办法，不过我是用ngSwitch解决的。

1.延迟加载，可以给定一个时间，这个时间之后再去加载，也可以判断在某个事件完成之后再去加载。主要是用Directive。具体可以参考这篇博客在AngularJS中实现一个延迟加载的Directive。

2.ngStyle，使用angular独有的ngStyle来判断什么时候用什么样式。

3.ngSwitch,就是我使用的解决办法，其实上边ngStyle的原理和它没有什么区别。下面将详细讲解一下！

ngSwith是什么

有时候你需要根据一个给定的条件来渲染不同的元素，而且情况多种多样，这时候如果你使用ngIf语句的话，那样代码会非常冗余，所以这时候ngSwitch出现。、

ngSwitch背后的思想就是对表达式进行一次求值，然后根据其结果来决定如何显示指令内的嵌套元素。一旦有了结果，我们就可以使用：

1.ngSwitchCase指令描述已知结果。

2.ngSwitchDefault:指令处理所有其他未知的情况。

如何解决我的问题

这时候我在ts中声明一个变量，然后根据后端传回来的不同数据情况去给变量赋不同的值。html页面用ngSwitch根据变量不同的值去渲染button不同的样式。详细代码如下：

HTML代码

 <!-- 根据状态ID来决定按钮的显示 -->
    <div [ngSwitch]="statusID">
      <!-- 只显示收了它按钮 -->
      <div *ngSwitchCase="0">
        <!-- <button pButton type="button" id="buy" (click)="buyGoods()" label="立即购买" style="float:right;display: block;" class="ui-button-success"></button> -->
        <button id="buy" style="float:right;display: block;" (click)="buyGoods()">收了它</button>
        <!-- <button pButton type="button" id="delivery" (click)="deliveryGoods()" label="收货" style="float:right;display: none;" class="ui-button-success"></button> -->
        <button id="delivery" style="float: right;;display:none;" (click)="deliveryGoods()">收货</button>
      </div>
      <!-- 两个按钮都不显示 -->
      <div *ngSwitchCase="1">
          <button id="buy" style="float:right;display: none;" (click)="buyGoods()">收了它</button>
          <button id="delivery" style="float:right;display:none;" (click)="deliveryGoods()">收货</button>
      </div>
      <!-- 只显示收货按钮 -->
      <div *ngSwitchCase="2">
          <button id="buy" style="float:right;display:none;" (click)="buyGoods()">收了它</button>
          &nbsp;&nbsp;&nbsp;
          <button id="delivery" style="float:right;display:block;" (click)="deliveryGoods()">收货</button>
      </div>    
    </div>