Question

我是Ionic2和Angular2的新手，尝试在前端更新我的阵列，但它没有更新。而且它在后端（ts）完全更新，使用控制台检查。需要你的帮助

我的组件：

import { Component } from '@angular/core';
import { NavController, NavParams, ViewController } from 'ionic-angular';




   @Component({
  selector: 'page-modal-filter',
  templateUrl: 'modal-filter.html'
})

export class ModalFilterPage {

  public fil=[];
  public BRANDNAME: any;
  public srts:any;



  constructor(public nav: NavController, public viewCtrl: ViewController, public navParams: NavParams) {
     this.fil = [];
     this.srts="ABCD";
    if (navParams.get('tabName') == 'filter') {
      let data = navParams.get('data');
      data.map(d => {
        for (let op in d.OPTIONGROUP) {
          for (let x in d.OPTIONGROUP[op]) {
            if (x != "UPC") {
              if (!this.fil[x]) {
                this.fil[x] = [];
              }
              if (this.fil[x].indexOf(d.OPTIONGROUP[op][x]) == -1) {

                this.fil[x].push(d.OPTIONGROUP[op][x]);
              }
            }
          }
        }
      })


      console.log(this.fil);


    }

  }

  closeModal() {
    // this.nav.pop();
    this.viewCtrl.dismiss(true);

  }
}

＆＃34; FIL＆＃34;数组没有在html的前端显示，但控制台显示它完美。

我的HTML代码： fil数组未显示

<ion-header>

  <ion-navbar color="primary">
    <ion-buttons start>
      <button ion-button (click)="closeModal()">
        <ion-icon name="close"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Search Result(105)</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding class="tab-filter">
  <!--filter list-->
  <pre>{{fil}}</pre>
  <pre>{{srts}}</pre>
  <ion-list class="list-no-border">
    <ion-item>
      <ion-label> PLACE</ion-label>
      <ion-select>
        <ion-option value="">All Regions</ion-option>
        <ion-option value="vn">Vietnam</ion-option>
      </ion-select>
    </ion-item>

    <ion-item class="price-ranger">
      <ion-label>Price</ion-label>
      <ion-input type="text" placeholder="Min"></ion-input>
      -
      <ion-input type="text" placeholder="Max"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Free shipping</ion-label>
      <ion-toggle checked="false"></ion-toggle>
    </ion-item>

    <ion-item>
      <ion-label>Once pice only</ion-label>
      <ion-toggle checked="false"></ion-toggle>
    </ion-item>

    <ion-item>
      <ion-label>Sale items</ion-label>
      <ion-toggle checked="false"></ion-toggle>
    </ion-item>

  </ion-list>

</ion-content>

<!--Footer buttons-->
<ion-footer class="category">
  <ion-toolbar position="bottom">
    <ion-buttons end>
      <button ion-button (click)="closeModal()">
        CANCEL
      </button>
      <button ion-button (click)="closeModal()">
        <span ion-text color="gray">APPLY</span>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

Answer 1

您的{{fil}}是一个数组，但您在视图中将其声明为简单属性。 Angular不会自动使用字符串插值解释数组。

对于数组，您需要使用*ngFor

因此，如果你想要在console.log中显示已经陈述的内容，你可以写出类似

的内容

<div *ngFor="let item of fil">
     <ion-item *ngFor="let color of item.COLOR">
       {{color.propertyName}}
     <ion-item>
     <ion-item *ngFor="let size of item.SIZE">
       {{color.propertyName}}
     <ion-item>
</div>

Answer 2

我使用

解决了我的问题

this.fil = [];

到

this.fil={}

Ionic2-array在html端没有更新

2 个答案: