Angular 爱奥尼亚4*ngFor在任何项目中都不起作用

好吧，我对离子和角度是完全陌生的，但我想做的很简单。显示我正在接收的数据，以便在离子卡中显示。我已经创建了一个名为“ActivityService”的服务来保存数据。 我的应用程序模块.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 {}

我的活动.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";

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();

  }
}

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

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

<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

我的主页.page.html：

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";

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();

  }
}

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

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

<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

---

在您的

home.module.ts

中，您正在订阅由

activityService.getAllActivities（）

返回的

可观察的

但是在模板中，您仍然使用
异步
管道

你可以选择其中一种，但不能同时选择两种

因此，
subscribe
订阅
可观察的
。或者使用模板中的
async
管道

但不要同时执行这两项操作，因为
async
管道无法处理普通JavaScript对象，并且无法订阅由
activityService返回的
Observable
。getAllActivities（）
将打开
Observable

我建议只在模板中使用
async
管道。所以，摆脱这一行：

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

从
HomePageModule
的
构造函数
开始工作

我认为这是你做错的地方

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

你好请注意，我在问题发生后添加了subscribe，以查看我是否收到了数据。我再次删除了.subscribe，但它仍然不能与async一起工作，不能以任何其他方式工作。我的爱奥尼亚版本可能有什么问题吗？他们可能把事情变成了这样？我不确定，因为@Orbit提到的链接显示了项目的完全不同的文件管理。我不知道这是为什么。而且，也不是说没有其他类型的ngFor在起作用。再看看我的另一个例子。更简单的一个。是否有可能创建一个复制问题的最小可验证示例？