Question

我有* ngIf的简单模板，其中它变为false我可以看到我的应用程序在此模块块上失败

错误：模板解析错误：（...）（匿名函数）@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;

Answer 1

首先使用引号修复ngIf属性：

*ngIf="userData?.isAuth"

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

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

Answer 2

<img>是一个自我结束标记。改为：

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

Answer 3

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

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

}

，模板是

TextBlock

Answer 4

我认为您收到错误是因为userData.user.name不是有效的图片网址，因此请在更改img标记后进行检查，如下所示：

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

确保userData.user.avatar的值为有效的图片网址值。

Answer 5

您需要将""添加到*ngIf

 *ngIf="userData.isAuth"

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

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

* ngIf在块上获得错误的错误

5 个答案: