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

【问题标题】：Ng hide/show dosn't work . In angular 4 [closed]Ng 隐藏/显示不起作用。在角度 4 [关闭]
【发布时间】：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，谢谢你！成功了！

标签： angular typescript

【解决方案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>

【讨论】：