我如何使用angular7检查ngstyle背景属性中的其他条件？

Question

我有一张要在 component 中显示的卡片列表。在每张卡上都有一个 cover-image 其 url 来自服务器并且在我的 component.html 中有一个 ngFor 像这样

 <div [style.background-image]="'url('+row.companyId?.coverUrl+')'" class="img-area">
 </div>
 <div class="card-content-area">
  <p class="card-title cursor-pointer" (click)="navigateToCOmpany(row)">{{row.companyId.name}}</p>
 <div class="card-description-area">
    <p class="site-text">{{row.offer_desc}}</p>
 </div>
    <a (click)="referralClick(row, i)" class="site-btn show-desktop-block">Get referral link</a>
    <a (click)="referralClick(row, i)" class="site-link-mobile show-mobile-block"><i class="fa fa-link mobile-link" aria-hidden="true"></i> Get Referral link</a>
 </div>

我正在 row.companyId.coverUrl 中获取封面图片。我想检查 row.companyId.coverUrl 是否存在，所以把传入的 Url 但是 url 不是来自 api 所以它应该把硬编码的 url 放在背景中./assets/img/abc.jpg

我该怎么做？

Answer 1

我会在订阅阶段尝试：

...subscribe(
  (data:any) => {
    this.row = data;
   if (!this.row){
     this.row = {
       companyId: {
         coverUrl: './assets/img/abc.jpg'
       }
     }
   }
   else if (!this.row.companyId){
     this.row.companyId = {
       coverUrl: './assets/img/abc.jpg'
     }
   }
   else if (!this.row.companyId.coverUrl)
       this.row.companyId.coverUrl = './assets/img/abc.jpg';
  }
)

如果您仍然有一个 URL 并且不想检查图像是否可以加载我认为您将需要一个 http.get('imageURL').subsribe() 如果它响应良好则进行测试。

我强烈建议你也看看 this post

所以这会做类似

的事情

在你的 ts:

localImg = "/assets/img/abc.jpg"

在你的 html:

[style.background]="'url('+row.companyId?.coverUrl+'), url(' + localImg +')'"

未测试

Answer 2

Angular 管道正好适合这种情况。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'coverImage'
})
export class CoverImagePipe implements PipeTransform {
  public transform(row: any): string {
    if (row != null && row.companyId != null) {
      return `url('${row.companyId.coverUrl}')`;
    }
    return `url('./assets/img/abc.jpg')`;
  }
}

然后在HTML

中使用这个管道

<div [style.background-image]="row | coverImage" class="img-area"></div>

我如何使用angular7检查ngstyle背景属性中的其他条件？

How can i check if else condition in ngstyle background property using angular7?

typescript

ng-style

angular