无法绑定到“ngForOf”，因为它不是“div”的已知属性。 - App.module.ts 已经有正确的引用

Question

My App.module.ts looks like this:

    import { BrowserModule } from '@angular/platform-browser';
      imports: [
        BrowserModule,
        //import HttpclientModule after BrowserModule
        HttpClientModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        DefaultModule,
    
  ],

I use in another component -> test.component.html

<div *ngFor="let list of JsonData">

{{title}}

</div>

But I don't understand the error message?

the JsonData structure looks like that:

Downloaded blob content {
"name": "test_sensor",
"timestamp": 1597925753,
"value": 12
}

The json-data.service.ts, where I retrieve the data from the Blobstorage:

import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import { JsonData } from '../models/jsondata';

import {
  BlobServiceClient,
  BlobDownloadResponseModel
} from "@azure/storage-blob";




@Injectable({
  providedIn: 'root'
})

    export class JsonDataService {
      private account = environment.ACCOUNT_NAME;
      
      private sas = environment.SAS;
      private blobServiceClient
    
      constructor() { this.blobServiceClient = new BlobServiceClient( `https://${this.account}.blob.core.windows.net${this.sas}`)}
    
    
      getData(): Promise<JsonData[]> {
    
        /*const blobServiceClient = new BlobServiceClient(
    
          `https://${this.account}.blob.core.windows.net${this.sas}`,
        );*/
    
    
        return new Promise(resolve => {
            
        
    
          const containerName = "container1";
          const containerClient = this.blobServiceClient.getContainerClient(containerName);
    
    
    
    
          //list blobs
          let i = 1;
          
          async function main() {
            i = 1;
            for await (const blob of containerClient.listBlobsFlat()) {
    
              console.log(`Blob ${i++}: ${blob.name}`);
              const blockBlobClient = containerClient.getBlockBlobClient(blob.name);
    

    
              const downloadBlockBlobResponse =  await blockBlobClient.download(0);
              const download = await blobToString(await downloadBlockBlobResponse.blobBody)
         
              console.log("Downloaded blob content",
               download
              );
    
            }
    
          }
    
          //BROWSER ONLY A HELPER METHOD USED TO CONVERT A BROWSER BLOB INTO STRING
          async function blobToString(blob: Blob): Promise<string> {
            const fileReader = new FileReader();
            return new Promise((resolve, reject) => {
             fileReader.onloadend = (ev: any ) => {
               resolve(ev.target!.result);
             };
             fileReader.onerror = reject;
             fileReader.readAsText(blob);
            });
          }
    
          main().catch((err) => {
            console.error("Error running sample:", err.message);
          })
    
        })
    
      }
    
    }

then in the test.component.ts file I want to display the json structure of the downloaded blob file.

import { Component, OnInit, Input } from '@angular/core';
import { JsonDataService } from 'src/app/services/json-data.service';
import { JsonData } from 'src/app/models/jsondata';



@Component({
  selector: 'app-posts2',
  templateUrl: './posts2.component.html',
  styleUrls: ['./posts2.component.scss'],
  providers: [JsonDataService]
})



export class Posts2Component implements OnInit {
  @Input() title: string;
  jsondatas: Array<JsonData> = [];
  jsondata: JsonData;
  name: String;
  timestamp: string;
  value: number;


  

  constructor(private jsonService: JsonDataService) {
  
  }

  ngOnInit(): void {
    this.jsonService.getData()
      .then(results => this.jsondatas = results);

    console.log(this.jsonService) **somehow this only shows the credentials (ACCOUNT, SAS) and not get back the jsondata**

  }



}

Answer 1

Make sure you import CommonModule to use directive *ngFor. It is part of CommonModule. Please add the common module to the module where TestComponent is declared.

import { CommonModule} from '@angular/common';
  imports: [
CommonModule
],

Please find more info here: https://angular.io/guide/frequent-ngmodules