非表示 - 表示ボタン

Question

私は、テンプレート内の3つのボタン（tbody）があります。

<tbody> 
    <tr *ngFor="let service_rec of list.servicelist"> 
     <td colspan="3"> {{ service_rec.name }} </td> 
     <td align="center" valign="middle"> 

     // 1 - button 
     <button [style.background-color]="service_rec.status == 
      'Online' ? 'green' : 'red'" 
      class="btn btn-default"> 
      {{ service_rec.status }} 
     </button> 
     </td> 
     <td align="center"> 

      // 2 - button 
      <button *ngIf="!!service_rec.servicecontrolled" 
       [style.background-color]="service_rec.controlled == 
       'true' ? 'green' : 'orange'" 
       class="btn btn-warning" 
       (click)="onPost(service_rec.title, 
       service_rec.status, service_rec.id)"> 
       {{ service_rec.servicecontrolled | json | stopPipe }} 
      </button> 

      // 3 - button 
      <button *ngIf="!!service_rec.servicecontrolled" 
       [style.background-color]="service_rec.controlled == 
       'true' ? 'green' : 'orange'" 
       class="btn btn-warning" 
       (click)="onStartPost(service_rec.title, 
       service_rec.status, service_rec.id)"> 
       {{ service_rec.servicecontrolled | json | startPipe }} 
      </button> 
     </td> 
    </tr> 
</tbody> 

を、今私は/非表示3表示されるでしょう - ボタン、とき：それから> - ： - オンライン

1ボタンストップ（stopPipe） - - 2ボタンを表示し、3を隠す - ボタン

そして、もし：

1 - ボタン：オフライン - スタート（startPipe） - - >その後、3ボタンを表示し、2を隠す - しかし、トン

どうすればよいですか？ ngShowと？または何？

Answer 1

を使用してdisplay: none;を持つクラスを切り替えることができますか？

<td align="center"> 
    <template *ngIf="service_rec.status=='Online'"> 
     // 2 - button 
     <button *ngIf="!!service_rec.servicecontrolled" 
      [style.background-color]="service_rec.controlled == 
      'true' ? 'green' : 'orange'" 
      class="btn btn-warning" 
      (click)="onPost(service_rec.title, 
      service_rec.status, service_rec.id)"> 
      {{ service_rec.servicecontrolled | json | stopPipe }} 
     </button> 
    </template> 

    <template *ngIf="service_rec.status=='Offline'"> 

     // 3 - button 
     <button *ngIf="!!service_rec.servicecontrolled" 
      [style.background-color]="service_rec.controlled == 
      'true' ? 'green' : 'orange'" 
      class="btn btn-warning" 
      (click)="onStartPost(service_rec.title, 
      service_rec.status, service_rec.id)"> 
      {{ service_rec.servicecontrolled | json | startPipe }} 
     </button> 
    </template> 
</td>