使用帶有ngStyle的背景圖片返回undefined

我嘗試添加圖片（使用API加載項目）爲background-image元素。但它保持Cannot read property 'url' of undefined錯誤。雖然它實際上呈現網址。這裏是模板側：使用帶有ngStyle的背景圖片返回undefined

<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"

來源

2017-12-27 Jamil Alisgenderov

確保財產的照片實際上是在您的數據存在 –

它是數據對象的一部分來自API –

我明白，但錯誤說夥伴沒有財產照片。檢查你的ngOnInit並看看 –

根據該錯誤消息時，photo字段不爲至少一個所定義partner。您可以防止與貓王操作員的情況：

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

或

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

在控制器

來源

2017-12-27 14:36:35 ConnorsFan

回答

相關問題