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**
}
}
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.