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 - 按钮：在线 - ＆gt;然后显示2按钮 - 停止（stopPipe） - 并隐藏3 - 按钮

如果：

1 - 按钮：离线 - ＆gt;然后显示3按钮 - 开始（startPipe） - 并隐藏2 - 按钮

这是怎么回事？用ngShow？或者是什么？

Answer 1

您可以尝试使用<template>代码吗？

<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>

Answer 2

这是一个很好的诀窍：What is the equivalent of ngShow and ngHide in Angular2?

您还可以使用[ngClass]

切换display: none;的课程

隐藏显示按钮

2 个答案: