Question

请帮助我，我不知道为什么当我启动离子项目时遇到了麻烦，但是使用相同的源代码，它在其他PC上运行良好。

代码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
         });
       }
      }
    }

代码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>

浏览器错误：

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

Answer 1

它可能与this有关（这是为什么它适用于某些机器但不适用于其他机器的原因）。

无论如何，您应该使用指定的ngStyle指令。

你可以直接在模板中做到这一点：

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

或者通过在MenuPage代码中添加一个函数来更好一些：

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

和

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

Ionic 2，无法设置＃<htmlelement>的属性样式

1 个答案: