ionic 4 *ngFor wouldnt work at all in any project

Question

Ok so I am completely new to Ionic and Angular but what I am trying to do is very simple. Display the data that I am receiving to be displayed in an ion-card. I have created a service named "ActivityService" that holds the data. my app.module.ts is:

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

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

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

  }
}

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

Note: The problem is that *ngFor is not working in any case. Also, as you can see, I have a console.log there as well to display that the data is being received and it sure is. But no matter what i do, *ngFor doesnt work in any way or case. I have tried simple ways to display data. Which is still not working.

My home.module.ts:

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

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

I still get nothing.

IONIC INFO:

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

Here is working Example

I think this is the place wrong which you are doing

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

Answer 2

In your home.module.ts, you're subscribing to the Observable returned by activityService.getAllActivities().

But in the template, you're still using an async pipe.

You'd do either one of those but not both.

So either subscribe to the Observable. Or use the async pipe in the template.

But don't do both because the async pipe doesn't work with normal JavaScript objects and subscribing to the Observable returned by activityService.getAllActivities() would unwrap the Observable.

I'd suggest just using the async pipe in the template. So get rid of this line:

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

From the constructor of HomePageModule.