Ng 隐藏/显示不起作用。在角度 4 [关闭]

Posted 2023-03-13

【中文标题】Ng 隐藏/显示不起作用。在角度 4 [关闭]

【英文标题】：Ng hide/show dosn't work . In angular 4 [closed]

【发布时间】：2018-06-05 19:34:54

【问题描述】：

试图隐藏/显示一列

<input type="checkbox" ng-model="checked"/> Hide
<div ng-hide="checked">
 hide Me
</div>

这里有什么问题？

我最初是在桌子上尝试过的... 隐藏/显示特定列。 但让我们保持简单。 它应该对两者都起作用，对吧？

 <input type="checkbox" ng-model="hideCoupons"/> Hide Coupons

  <tr  *ngFor="let c of customers| customerFilter:custTerm ; let 
 i=index"> 
<td scope="row">c.id</td>
<td>c.custName</td>
<td>c.password</td>
<td ng-hide="hideCoupons" style="font-size:9px; color:red">c.coupons | 
json</td>
<td class="btn btn-danger" (click) ="removeCustomers(c.id)" 
(click)="removeCustomersUi(i)"><a id="delete">DELETE</a></td>  
</tr>

顺便说一句，我也试过 $scope.IsVisible = true。但我的 ts 文件似乎无法识别 $scope...

【问题讨论】：

ng-hide、ng-model 和 $scope 都来自 AngularJs - 你不能在 Angular 中使用这些。

我正在使用 angular4。也试过 [(ngModel)] ......所以..如何隐藏和显示列？

这个问题是关于什么 Angular 的？

在 Angular 4 中，您可以使用 *ngIf="!checked"。

ConnorsFan，谢谢你！成功了！

【参考方案1】：

感谢 *ngIf="!checked" 解决了这个问题。 非常感谢大家！

【参考方案2】：

您可以使用NgIf directive

Angular 5 演示：

https://stackblitz.com/edit/angular-ejrdwr?file=app%2Fapp.component.ts

app.component.ts

import  Component  from '@angular/core';


@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
)
export class AppComponent  

app.component.html

<input type="checkbox" [(ngModel)]="checked"/> Hide
<div *ngIf="!checked">
 hide Me
</div>