ngIf 在角度 2 中不起作用答案

【问题标题】：ngIf in angular 2 not workingngIf 在角度 2 中不起作用
【发布时间】：2017-06-05 11:59:24
【问题描述】：

<div *ngFor="let message of messages">
  <div *ngIf="message.user===user">

  </div>

 <input [(ngModel)]="message"  />
<button (click)="sendMessage()">Send</button>

这里的用户是我在组件中分配的变量。那是一个字符串值'user1'。如果message.user === user1 那么我需要展示一些东西但它不起作用。

【问题讨论】：

message.user和user的值是多少？
请添加您的 componet.ts 代码。
调试你的代码。将输出语句VALUS ARE '{{message.user}}' and 'user'}} 添加到您的模板。不管怎样，你期待发生什么？ div 你有*ngIf 是空的。另外，你的顶部div 没有关闭。

标签： angular angular2-directives angular-ng-if

【解决方案1】：

根据您当前的代码块，您将message（对象实例）绑定到input 和[(ngModel)] 中的*ngFor，这将导致error。

同样当你在input 中输入一个字符时，它会将message(object) 转换为字符串，然后丢失原始字段（例如user）。也许这就是你现在的情况的原因。

这里很简单 demo 可能有助于摆脱这种情况。

【讨论】：

【解决方案2】：

你需要这样的基本代码......至少。

<div *ngFor="let message of messages">
  <div *ngIf="message.user === user">
      user: {{ message.user }}
  </div>
</div>
<input [(ngModel)]="message"  />
<button (click)="sendMessage()">Send</button>

你的组件也应该有 'messages' 属性。

【讨论】：

【解决方案3】：

我提供了一些演示 ..因为您未能添加您的 .ts 文件，请通过以下操作： https://angular.io/docs/ts/latest/api/common/index/NgIf-directive.html

【讨论】：

【解决方案4】：

抱歉，错误只是因为我错过了关闭一个 div，感谢您的回复

【讨论】：