バインド変数がNULLとして結合したときngStyle

Question

私はngStyleを使用して背景画像を設定しようとしています、

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

カテゴリは1つの単語であるとき、それは動作しますが、それは二つの単語を持っているとき、それは動作しません使用してバインド、それはヌルとしてバインドします。

たとえば、「フォーミュラワン」となるとnullとしてバインドされます。どうした？スペースで

Answer 1

URLを直接解釈し得ることはありません、 は

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

例において、成分

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

、これを試してみてください：

@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)' 
    }; 
} 

編集：ヨールがある場合イベントをループすると、evを渡す必要がありますENTパラメータが

@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)' 
    } 
    }