ionic 4 *ngFor 在任何项目中都不起作用

Question

好的，所以我对 Ionic 和 Angular 完全陌生，但我想做的很简单。显示我收到的数据以显示在离子卡中。我创建了一个名为“ActivityService”的服务来保存数据。 我的 app.module.ts 是：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule,],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

我的activity.service.ts：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Activity } from './types';

@Injectable({
  providedIn: 'root'
})
export class ActivityService {

  constructor(private _httpClient: HttpClient) { }

  getActivity(activityID : string): Observable<Activity>{
    return this._httpClient.get<Activity>(API +"/id/"+activityID);
  }

  getAllActivities(): Observable<Activity[]>{
    return this._httpClient.get<Activity[]>(API);
  }
}

const API = "http://orangevalleycaa.org/api/videos";

我的home.module.ts：

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab1Page } from './tab1.page';
import { Observable } from 'rxjs';
import { Activity } from '../types';
import { ActivityService } from '../activity.service';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: Tab1Page }])
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule {

  activityList: Observable<Activity[]>;

  constructor(activityService: ActivityService){
    this.activityList = activityService.getAllActivities();

  }
}

我的home.page.html：

<ion-header>
  <ion-toolbar color="danger">
    <ion-title>
       Buttons
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card *ngFor="let activity of (activityList | async)">

    <ion-card-header>
      <ion-card-subtitle>Destination</ion-card-subtitle>
      <ion-card-title>awdaww</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      Founded in 1829 on an isthmus between Lake Monona and Lake Mendota, Madison was named the capital of the Wisconsin Territory in 1836.
    </ion-card-content>
  </ion-card>
</ion-content>

注意：问题是 *ngFor 在任何情况下都不起作用。此外，如您所见，我在那里还有一个 console.log 以显示正在接收数据，而且确实如此。但无论我做什么，*ngFor 在任何情况下都不起作用。我尝试过简单的方法来显示数据。还是不行。

我的home.module.ts：

  cryptoList: string[] = [
    "Bitcoin",
    "Ethereum",
    "Bitcoin Cash",
    "Ripple",
    "Litecoin"
  ];
  constructor( ) {
  }

我的home.page.html：

<ion-item>
      <ion-label>Cryptocurrency</ion-label>
      <ion-select>
        <ion-select-option *ngFor="let crypto of cryptoList" [value]="crypto">{{ crypto }}</ion-select-option>
      </ion-select>
 </ion-item>

我仍然一无所获。

离子信息：

Ionic:

   Ionic CLI                     : 5.4.1
   Ionic Framework               : @ionic/angular 4.10.0
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8

Answer 1

在您的home.module.ts 中，您订阅了activityService.getAllActivities() 返回的Observable。

但在模板中，您仍在使用async 管道。

你可以做其中之一，但不能同时做。

所以要么subscribe 要么Observable。或者使用模板中的async 管道。

但不要同时使用这两种方法，因为async 管道不适用于普通的 JavaScript 对象，订阅activityService.getAllActivities() 返回的Observable 会解开Observable。

我建议只在模板中使用async 管道。所以去掉这条线：

this.activityList.subscribe((response) => {
  console.log(response);
});

来自HomePageModule 的constructor。

Answer 2

这里正在工作Example

我认为这是你做错的地方

console.log(this.activityList[0]):
//assign this
this.cryptoList=this.activityList[0];