Question

我正在开发一个用户可以搜索分类广告的应用。

但是，我无法显示搜索结果。

这是我的search_results.ts：

import {Component} from '@angular/core'; 
import {NavController, NavParams} from 'ionic-angular'; 
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
     selector: 'page-page1',
     templateUrl: 'search_results.html' })

 export class SearchResults {
     public term: any;
     public ads: any;
     public tmp: any;

     constructor(public navCtrl: NavController, public params: NavParams, public http: Http) {
         this.term = this.params.get('term');
         this.ads = [];
         this.tmp = [];

         console.log("this.term", this.term);

         this.http.get('http://www.truckers.host/app/search-ads.php')
          .map(res => res.json()).subscribe(data =&gt; {
            console.log("this is returned from http.get", data);
        });
     }

     ngOnInit() {
         // Let's navigate from TabsPage to Page1
         console.log(this.params);
     } }

现在，在我的search_results.html中显示搜索结果，我无法打印任何内容。

以下是代码：

<ion-header>
    <ion-navbar>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>
            <img src="assets/images/trucker-to-trucker-logo.png" />
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding class="card-background-page">
    <ion-card>

        <ion-card-header>
            Search Results
        </ion-card-header>

        <ion-card-content>
            Searching for: <b>{{ term }}</b>
        </ion-card-content>

    </ion-card>

    <ion-card>
        <ion-list>
            <ion-item *ngFor="let ad of ads">
                {{ ad.ad_id }}
            </ion-item>
        </ion-list>
    </ion-card>
</ion-content>

不返回任何内容，也不会迭代。

当我在console.log（数据）时，我得到一个Object of Objects，而Ionic不想循环它们。

请让我知道我应该提供哪些其他信息来帮助。

Answer 1

*ngFor仅支持Array而非Json Object。您应该考虑使用自定义Pipe将Object转换为Array。

有关Pipe。

的文档

@Pipe({name: 'toArray'})
export class ToArrayPipe implements PipeTransform {
  transform(inputObj: any, arg: any) {
    if (!inputObj) { return [] }

    let arr = []; 
    for(let key in inputObj) {
      // Option1 (only value without the json object's key)
      // this way will lose the key of Json Object
      //arr.push(inputObj[key]);

      // OPtion2 (both the key and value)
      let obj = {};
      obj[key] = inputObj[key];
      arr.push(obj);
    }
    return arr;
  }  
}

然后将其添加到NgModule的声明中，并以这种方式在你的太阳穴中使用它：

<ion-item *ngFor="let ad of ads | ToArray">
  ...
</ion-item>

Ionic 2不会让我使用* ngFor循环遍历对象的对象

1 个答案: