Ionic3 Angular img标签NgIf语法错误问题求助

你的*ngIf写法完全不符合Angular的语法规则，这是导致错误的核心原因：

• 首先，*ngIf的as关键字是用来将条件表达式的结果赋值给一个变量（比如*ngIf="data$ | async as data"），而你写的results.poster_path as 'null'是完全错误的用法，Angular无法解析这种语法。
• 其次，你混淆了*ngIf的用途：它的作用是控制元素是否显示/隐藏，而不是用来给属性赋值。你试图在*ngIf里用then/else来给jaquette赋值，这完全违背了*ngIf的设计逻辑——then/else是用来切换不同的模板片段，不是用来处理属性值的。
• 最后，你的条件表达式逻辑混乱，判断poster_path是否为空的写法results.poster_path as 'null' || ''完全无效，正确的空值判断应该是!results.poster_path或者results.poster_path === null || results.poster_path === ''。

另外还有个小细节：[(ngModel)]通常用于表单控件（比如input、select），绑定到img的name属性上意义不大，如果你是想存储当前图片的路径，建议在组件类里处理，而不是通过img的属性绑定。

根据你的需求，分两种场景给出解决方案：

场景1：无论是否有海报图，都显示图片（无海报时显示默认图） #

不需要用*ngIf，直接在[src]里用三元表达式判断路径即可：

<img name="{{i}}" [src]="results.poster_path && results.poster_path !== '' ? themoviedbServicesProvider?.baseUrlConfig + results.poster_path : noJaquette" />

如果noJaquette是你定义的默认图路径（比如本地资源'assets/img/no-poster.png'），这样当poster_path存在且不为空时加载电影海报，否则加载默认图。

场景2：只有当有海报图时才显示img元素，否则不显示 #

把*ngIf和[src]分开写，*ngIf只负责判断显示条件：

<img name="{{i}}" [src]="themoviedbServicesProvider?.baseUrlConfig + results.poster_path" *ngIf="results.poster_path && results.poster_path !== ''" />

更优雅的写法：把逻辑移到组件类中 #

为了让模板更简洁，建议在组件类里定义一个getter方法来处理图片路径：

// 组件类中的代码
get currentPosterUrl(): string {
  if (this.results?.poster_path && this.results.poster_path !== '') {
    return this.themoviedbServicesProvider.baseUrlConfig + this.results.poster_path;
  }
  return this.noJaquette; // 这里的noJaquette是你预先定义的默认图路径
}

然后模板里直接使用这个getter：

<img name="{{i}}" [src]="currentPosterUrl" />

这种方式把逻辑从模板中剥离，更易于维护和调试，也符合Angular的最佳实践。

内容的提问来源于stack exchange，提问作者marilyn