Как я могу проверить, если еще условие в фоновом свойстве ngstyle, используя angular7? - PullRequest
Новая
       33

Как я могу проверить, если еще условие в фоновом свойстве ngstyle, используя angular7?

0 голосов
/ 07 ноября 2019

У меня есть список карт для отображения в 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

Как я могу это сделать?

Ответы [ 2 ]

0 голосов
/ 07 ноября 2019

Угловые трубы в точности соответствуют этому сценарию. 

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>
0 голосов
/ 07 ноября 2019

Я бы попробовал на этапе подписки: 

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

, если у вас все еще есть URL и вы не хотите проверять, можно ли загрузить изображение. Я думаю, вам понадобится http.get('imageURL').subsribe(), затем выполнитепроверьте, хорошо ли он реагирует.

Я настоятельно рекомендую вам взглянуть на этот пост тоже

, так что это будет что-то вроде

в ваших тс: 

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

в вашем html: 

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

не проверено

...