CODEWITHSUNDEEP
angularionic2
Huy Hoang
Huy Hoang

Reputation: 9

Ionic 2, Cannot set property style of #<HTMLElement>

Please help me, I don't know why when i start my ionic project I got below trouble, but with same source code, it's running well on other PC.

code JS:

import {Page, NavController, NavParams} from 'ionic-angular';
    import {ListFoodPage} from '../list-food/list-food';
    import {Http} from 'angular2/http';
    import 'rxjs/add/operator/map';

    @Page({
      templateUrl: 'build/pages/list-menu/list-menu.html'
    })
    export class MenuPage {
      static get parameters() {
        return [[NavController], [NavParams],[Http]];
      }

      constructor(nav, navParams,http) {
        this.nav = nav;
        this.http = http;
        this.menu = null;
        this.title = 'Menu';
        this.selectedItem = navParams.get('item');
        if(this.selectedItem){
          this.title = this.selectedItem.mn_nm;
          this.menu = this.selectedItem.sub_mn;
        }else{
          this.http.get('/data/menu?res_id=' + 'FIRST_RES').map(res => res.json()).subscribe(data => {
              this.menu = data.data;
          });
        }
      }

      itemTapped(event, item) {
        if(item.sub_mn === undefined || item.sub_mn.length == 0){
          this.nav.push(ListFoodPage, {
           item: item
         });
        }else{
         this.nav.push(MenuPage, {
           item: item
         });
       }
      }
    }

code html: 

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>{{title}}</ion-title>
</ion-navbar>

<ion-content>
  <ion-list class="menu">
    <button ion-item *ngFor="#menuitem of menu" (click)="itemTapped($event, menuitem)" style="background-image: url('{{menuitem.bg_img}}')">
      <h2>{{menuitem.mn_nm}}</h2>
      <P>
        {{menuitem.mn_dsc}}
      </P>
    </button>
  </ion-list>
</ion-content>

Browser error:

EXCEPTION: TypeError: Cannot set property style of #<HTMLElement> which has only a getter in [background-image: url('{{menuitem.bg_img}}') in MenuPage@9:87]

My result when run on browser

Upvotes: 0

Views: 440

Answers (1)

Yaron Schwimmer
Yaron Schwimmer

Reputation: 5357

It might be related to this (as a reason to why it works on some machines but doesn't on others).

Anyway, you should use the designated ngStyle directive.

You can do it ugly and directly in the template:

<button ion-item *ngFor="#menuitem of menu" (click)="itemTapped($event, menuitem)" [ngStyle]="{'background-image': 'url(' + menuitem.bg_img + ')'}">

Or a little nicer by adding a function to your MenuPage code:

generateUrlString(image) {
  return `url('${image}')`;
}

and

<button ion-item *ngFor="#menuitem of menu" (click)="itemTapped($event, menuitem)" [ngStyle]="{'background-image': generateUrlString(menuitem.bg_img)}">

Upvotes: 1

Related Questions