Question

我是Ionic和API的初学者。目前，我有一个API，我需要在其中获取数据并将其显示在我的应用中。我能够以Array格式获取数据，并且无法显示它。我试图将数据格式更改为JSON，但无济于事。我也尝试过使用* ngFor显示数据，但它也无法正常工作。有人可以指导我吗？

我在console.log中看到的数据是这种格式的（我为一条记录附加了代码）：

{resource_id: Array(1), limit: 100, total: "62", records: Array(62)}
limit: 100
records: Array(62)
1:
dedicated_date: "1900-01-01T00:00:00"
dedicated_time: "00:00:00"
dedication_id: 4
location: "some text"
message: "some text"
other_song_request: ""
phone_no:"1234567"
pledge_amount: 300
remain_anon: 0
sing_to: "some text
sing_to_department: "some text"
song: "some text"
special_request: ""
status: ""

我也在控制台日志中看到了这一点：

hello
Subscriber {closed: false, _parent: null, _parents: null, _subscriptions: 
Array(1), syncErrorValue: null, …}
closed: false
destination: SafeSubscriber {closed: false, _parent: null, _parents: null, 
_subscriptions: null, syncErrorValue: null, …}
isStopped: false
syncErrorThrowable: false
syncErrorThrown: false
syncErrorValue: null
_parent: null
_parents: null
_subscriptions: []
__proto__: Subscription

... /提供者/圣诞节

getDedi() {
   return Observable.create(observer => 
  this.http.get<DediResult>(`${this.dataApiUrl}?//some api
    { headers: new HttpHeaders().set('X-XSRF-TOKEN', this.getCookie('XSRF-TOKEN'))})
    .subscribe(data => {
    console.log(data);
    /*observer.next(true);
    observer.complete();*/
  }, error => {
    console.log(error);
    observer.next(false);
    observer.complete();
  })
)

}

admin.ts

@Component({
  selector: 'page-admin',
  templateUrl: 'admin.html'
})
export class AdminPage {

  dedi: Dedi[];

  constructor(public navCtrl: NavController, public navParams: 
NavParams, public christmasProvider: ChristmasProvider, private storage: 
Storage) {
    console.log('constructor Testpage');
  }

  gotoDetailspage(dedi){
    this.navCtrl.push(DetailPage, {dedi: dedi});
  }

   ionViewDidLoad(){
console.log('ionViewDidLoad Testpage');

const dedicator = this.christmasProvider.getDedi().subscribe(dedid => {
  this.dedi = dedid;
});
console.log('hello', dedicator);
  }      
}

admin.html

<ion-header>
    <ion-navbar color="primary">
      <button ion-button menuToggle>
        <ion-icon name="menu" style="color: #fff"></ion-icon>
      </button>
      <ion-title>
        <p class="header">ADMIN</p>
      </ion-title>
    </ion-navbar>
  </ion-header>

  <br><br><br>
  
  <ion-content padding>
      <h6>DEDICATION:</h6>
        <ion-item *ngFor ="let d of dedid " (click) = gotoDetailspage()>
        <ion-row>
          <ion-col align-self-start style="text-align: left;">
              <p>{{ d.song }}</p> 
              <p>{{ d.pledge_amount }}</p> 
          </ion-col>
        </ion-row>
      </ion-item>
    </ion-content>

../ models / songdedi

export interface DediData {
    data: DediResult;
}

export interface DediResult {
    result: DediRecords;
}

export interface DediRecords {
    records: Dedi[];
}

export interface Dedi {
    dedication_id: string;
    pledge_amount: number;
    phone_no: number;
    sing_to: string;
    sing_to_department: string;
    dedicated_date: string;
    song: string;
    other_song_request: string;
    special_request: string;
    status: string;
    location: string;
    message: string;
    remain_anon: string;
}

谢谢大家。

Answer 1

似乎您在dedi上没有使用声明为变量admin.html，而是使用了错误的dedid。

// Change the get dedi function into this
getDedi() {
    return this.http.get<DediResult>(`${this.dataApiUrl}?//some api
    { headers: new HttpHeaders().set('X-XSRF-TOKEN', this.getCookie('XSRF-TOKEN'))});
)

// and In your admin.ts
ionViewDidLoad(){
    this.christmasProvider.getDedi().pipe(
        map((dediResult: DediResult) => dediResult && dediResult.result.records)
    ).subscribe(dedid => {
        this.dedi = dedid;
    });
};

无法在前端显示API数据-Ionic

1 个答案: