*ngIf 得到错误的块错误答案

【问题标题】：*ngIf getting error on block that get false*ngIf 得到错误的块错误
【发布时间】：2017-02-22 04:19:50
【问题描述】：

我有一个带有 *ngIf 的简单模板，但它是假的我可以看到我的应用程序在这个模板块上失败了

错误：模板解析错误：（…）（匿名函数）@main.bundle.js:42150ZoneDelegate.invoke@zone.js:203Zone.run@zone.js:96（匿名函数）@zone.js:462ZoneDelegate .invokeTask@zone.js:236Zone.runTask@zone.js:136drainMicroTaskQueue@zone.js:368ZoneTask.invoke@zone.js:308

我的 ngIf 是假的，但我可以看到它在该块上抛出错误...

这是我的模板：

 <div *ngIf=userData.isAuth>
<div class="user-profile clearfix">
  <div class="dropdown al-user-profile">
    <a class="profile-toggle-link dropdown-toggle" id="user-profile-dd" data-toggle="dropdown"
       aria-expanded="false">
      <img src="{{ (userData.user.name| userData.user.avatar ) }}"> //the problem line

我的组件：

  constructor(private _state:GlobalState,userData:UserData) {
    this._state.subscribe('menu.isCollapsed', (isCollapsed) => {
      this.isMenuCollapsed = isCollapsed;
    });
  }

和服务

@Injectable()
export class UserData {
  user = {};  //geting populated by function
  isAuth = false;

【问题讨论】：

错误消息中是否有其他信息。您是否将 CommonModule 添加到组件所属的 @NgModule() 的 imports: [] 中？
不仅添加完整的消息... 并显示完整的模板。确保所有开始标签都已关闭
我删除所有作品时的问题

标签： angular

【解决方案1】：

检查example ng 2 后看到更好的解决方案，无需检查模板...

export class BaPageTop implements OnInit{
  public userdata:UserData;
  constructor(private _state:GlobalState,public userData:UserData) {}

  ngOnInit(): void {
    this.userdata=this.userData;

}

模板是

<div *ngIf="userdata.isAuth">
    <div class="user-profile clearfix">...

【讨论】：

【解决方案2】：

首先用引号修复你的ngIf 属性：

*ngIf="userData?.isAuth"

问题是，| 用于模板中的pipes，而头像肯定不是pipe。所以你没有说明你想用管道实现什么，但也许这就是你想要的：

<img src="{{userData.user?.name}}/{{userData.user?.avatar}}"/>

【讨论】：

来吧，这很简单。它告诉您，userData 对象尚未加载。只需添加?。我更新了我的帖子...
奇怪的是我需要检查 userData?.isAuth 因为它没有进入任何重置服务。

【解决方案3】：

您需要将"" 添加到*ngIf

 *ngIf="userData.isAuth"

请删除图片标签内的()：

  <img src="{{userData.user.name| userData.user.avatar }}">

【讨论】：

@Jens 模板解析错误被删除：Error: Template parse errors:(…)(anonymous function)

【解决方案4】：

我认为您遇到了错误，因为userData.user.name 不是有效的图像 URL，因此请在更改 img 标记后检查如下：

<img [src]="userData.user.avatar" [alt]="userData.user.name"/>

确保 userData.user.avatar 的值是有效的图像 URL 值。

【讨论】：

但是 ngif 是假的，为什么它很重要？
将*ngIf=userData.isAuth 更改为*ngIf="userData.isAuth" 并检查。

【解决方案5】：

<img> 是一个自闭合标签。改为：

<img src="{{ (userData.user.name| userData.user.avatar ) }}"/>

【讨论】：

好的，这是一个修复，但还是一样。如果它是假的，它为什么会这样？它是否应该关心用户数据是否已定义？
使用userData?.user?.Name 所以如果用户数据为空也没关系。当然还有用户
模板在所有情况下都会被解析。它不取决于是否使用代码。错误出现在编译时。不在运行时