Question

在我的component.ts文件中，我有一个用户列表。我想在我的HTML中显示它们。

component.html

   <ul>
     <li *ngFor="let user of users" class="contact-details">
       <img [src]="'https://app.compnay.com/{{user.profileImage}}' === ''? '../../../../../../../assets/images/empty-user-profile.png': 'https://app.company.com/{{user.profileImage}}'">
     </li>
   </ul>

我收到此错误

未捕获的错误：模板解析错误：解析器错误：得到了插值（{{}}），其中表达式应在第29列中 ['https://app.company.com.sa/ {{user.profileImage}}'===``？ '../../../../../../../assets/images/empty-user-profile.png'： 'https://app.company.com.sa/ {{user.profileImage}}']在 ng：///ChatModule/ContactSearchResultListComponent.html@6：19 （“ ass =” contact-image“>

Answer 1

由于您已经通过[src]使用了Angular模板绑定，因此无需使用插值{{}}，这就是为什么您不允许这样做并且出现错误的原因。

正确的语法为：

    <img [src]="user.profileImage === '' ? '../../../../../../../assets/images/empty-user-profile.png': 
   'https://app.company.com/' + user.profileImage">

但是我鼓励您将逻辑移至 component.ts 并仅绑定变量，例如

HTML

<img [src]="userProfileImage" />

TS

userProfileImage: string;

ngOnInit(): void {
   ...

   this.userProfileImage = user.profileImage === '' ? '../../../../../../../assets/images/empty-user-profile.png': 
   'https://app.company.com/' + user.profileImage;

   ...
}

Answer 2

就这样尝试

<ul>
  <li *ngFor="let user of users" class="contact-details">
    <img [src]="user.profileImage === ''?'../../../../../../../assets/images/empty-user-profile.png':'https://app.company.com/'+user.profileImage">
  </li>
</ul>

Answer 3

使用这种方式

<ul>
  <li *ngFor="let user of users" class="contact-details">
    <img [src]="user.profileImage === '' ? '../../../../../../.../assets/images/empty-user-profile.png' : 'https://app.company.com/' + user.profileImage ">
</ul>

尝试将[src]与url和变量一起使用

3 个答案: