Переменная привязки привязывается как null при привязке с использованием ngStyle

Я пытаюсь установить фоновое изображение с помощью ngStyle,

<div  class="artist-banner fluid-banner-wrapper" [ngStyle]="{'background-image':  'url(../imgs/banner/' + event?.category + '.jpg)'  }">

это работает, когда категория состоит из одного слова, но не работает, когда в ней два слова, она связывается как null

например, когда он приходит как «Формула-1», он связывается как нуль. в чем проблема?


typescript angular ng-style
person Community    schedule 31.05.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

URL-адрес с пробелами не будет интерпретироваться напрямую, попробуйте это,

<div class="artist-banner fluid-banner-wrapper" [ngStyle]="alertStyles">

В компоненте,

alertStyles = {
        'background-image':  'url(../imgs/banner/' + this.event?.category.replace(" ", "%20") + '.jpg)'
      };

Пример:

@Component({
  selector: 'app-style-example',
  template: `
    <div  class="artist-banner fluid-banner-wrapper" [ngStyle]="alertStyles">
  `
})
export class StyleExampleComponent {

  alertStyles = {
    'background-image':  'url(../imgs/banner/' + this.event?.category.replace(" ", "%20") + '.jpg)'
  };
}

Изменить: если вы зацикливаете событие, вы должны передать параметр события

   @Component({
      selector: 'app-style-example',
      template: `
        <div  class="artist-banner fluid-banner-wrapper" [ngStyle]="changeStyle(event)">
      `
    })
    export class StyleExampleComponent {


    }



  changeStyle(event) {
    return {
        'background-image':  'url(../imgs/banner/' + event?.category.replace(" ", "%20") + '.jpg)'
    }
  }
person Sravan    schedule 31.05.2017
comment
это угловой2 - person ; 31.05.2017
comment
вы отметили угловой - person Sravan; 31.05.2017
comment
угловой есть угловой2 - person ; 31.05.2017
comment
это было в цикле? - person Sravan; 31.05.2017
comment
согласно вашему образцу, откуда происходит событие? ваш ответ полностью отклоняется - person ; 31.05.2017
comment
у вас должна быть переменная события в самом компоненте или this.event - person Sravan; 31.05.2017