无法绑定到“ngForOf”，因为它不是 ngFor Angular 中“li”的已知属性

Question

I saw another question about the same problem, but I don't know why I get this error. The odd thing here is that I did another component that returns a array and works fine, now I've created this new one but it doesn't work.

Can't bind to 'ngForOf' since it isn't a known property of 'li'

this is my component SubscriptionCustumerComponent:

    public subscriptions:Subscription[];

constructor(private subscriptionService:CustumerSubscriptionService){} 

ngOnInit(): void {

        this.subscriptionService.getsubscriptionbyID(this.userid)
        .subscribe(res=>this.subscriptions=res,
            error=> this.errorMessage);
    
}

the page:

    <ul  class="nav">
    <li *ngFor="let data of subscriptions" >
        <div class="card">
             <img src="{{data.image}}" style="width:100%;height:250px;">
            <h1>{{data.name}}</h1>
          </div>
    </li>
</ul> 

the SubscriptionModule:

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { CustumerSubscriptionService } from "./service/subscription.service";
import { CustumerSubscriptionAppComponent } from "./subscription.app.component";
import { CustumerSubscriptioRoutingModule } from "./subscription.route";

@NgModule({

    declarations:[
        CustumerSubscriptionAppComponent
    ],
    imports:[
        CommonModule,
        CustumerSubscriptioRoutingModule
        
    ],
    providers:[
        CustumerSubscriptionService
    ]
})

export class CustumerSubscriptionModule{}

and the main Module AppModule:

@NgModule({
  declarations: [
    AppComponent

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NavegacaoModule,
    NgbModule,
    ToastrModule.forRoot(),
    HttpClientModule
  ],
  providers: [httpInterceptorProviders],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

double check what your service is returning. Most likely this:

this.subscriptions=res

Is not an array. And the most likely explanation for this is that you are returning a single record based on this.userid, instead of an array.

try to console.log(this.subscriptions) to see what it is. If it's not an array, you will get that error.

Answer 2

You tell your component is called SubscriptionCustumerComponent , however it is not declared in the SubscriptionModule . Instead, we have CustumerSubscriptionAppComponent . This could be an issue because all other things (including browser module and common module) seem to be correct.