ngStyleで背景画像を使用すると、未定義の結果が返されます。

Question

画像を追加して（アイテムを読み込むためのAPIを使用）、の背景画像という要素を追加しようとしています。しかし、それはCannot read property 'url' of undefinedエラーを維持します。それは実際にURLをレンダリングしますが。

<div class="col s12 m4" *ngFor="let partner of partners"> 
       <div class="card" *ngIf='partner'> 
        <div class="card-image " [ngStyle]="{'background-image': 'url(' + partner?.photo['url'] + ')'}"> 
         <a class=" btn-floating halfway-fab waves-effect waves-light blue left "> 
          <i class="material-icons ">shopping_cart</i> 
         </a> 
         <a class="btn-floating halfway-fab red " [routerLink]='"/dashboard/partners/edit/"+partner["id"]'> 
          <i class="large material-icons ">mode_edit</i> 
         </a> 
        </div> 
        <div class="card-content "> 
         <h5 class="center font-weight-400 ">{{partner.name}}</h5> 
         <p class="center ">{{partner.category.name}}</p> 
        </div> 
       </div> 
    </div> 

とコントローラ：

export class PartnersListComponent implements OnInit { 
    partners: {}[] = []; 

    constructor(private _partnersService: PartnersService) {} 

    ngOnInit() { 
     this._partnersService.getPartners().subscribe(data => { 
     if (data.status == "200") { 
      this.partners = data.data; 
     } 
     }); 
    } 
    } 

例データ：ここ テンプレート側でエラーメッセージに従って

category:'', 
created_at:"2017-12-27 12:57:50", 
deleted_at:null, 
first_entry:1, 
id:1, 
name:"Zara", 
photo:{id: 5, url: "example.jpeg"}, 
updated_at:"2017-12-27 12:57:50", 
username:"zara-001" 

Answer 1

、photoフィールドは、少なくとも一つのために定義されていませんpartner。あなたはエルビス演算子とその状況から保護することができます：あなたのコントローラで

[ngStyle]="{'background-image': `url(${partner?.photo?.url})`}" 

または

[style.background-image]="`url(${partner?.photo?.url})`"