File Upload Firebase Cannot Read Property 0 of Undefined
Event
i am developing a catalog awarding, and i would like to display tooltips in my list options.
here is my list for you lot to sympathize improve:
I want that when for case my mouse slides on the first choice of the listing the following message is displayed: "Exporte les données des catalogues du contexte de mapping en cours au format XML"
and so on ....
to do this i created this table in my .ts file :
const info_bulle_export: Array<{id:number, text:cord}> =[ {id:one, text:'Exporte les données des catalogues du contexte de mapping en cours au format XML'}, {id:2, text:''}, {id:3, text:'Exporte les données de mapping du contexte de mapping en cours au format XML'}, {id:four, text:''}, {id:5, text:'Exporte un rapport détaillé du mapping des scopes du contexte de mapping en cours au format XLS'}, {id:half dozen, text:'Exporte dans le même fichier XML les données catalogues et mapping par système de mapping, peut exporter dans une annal de fichiers XML tous les systèmes de mapping du contexte en cours'}, {id:vii, text:'Exporte le contexte de mapping en cours au format zip archivant les données catalogues dans united nations fichier XML et les données mapping dans un autre fichier XML'}, {id:8, text:'Exporte les entités non mappées au format XLS'}, {id:9, text:'Exporte les entités sans relations au format XLS'}, {id:10, text:''} ]; and in my .html file I put this:
<pick *ngFor="let worker of workerExportList; index as i" [ngValue]="worker" data-toggle="tooltip" data-placement="acme" title="{{info_bulle_export[i]}}">{{worker.label}}</selection> here is all the lawmaking for my .ts file if you needed to:
import { Observable } from 'rxjs/Rx'; import { Http, RequestOptions, Headers, ResponseContentType, Response } from '@angular/http'; import { environment } from './../../../../environments/environment'; import { ExportService } from './../../exportDirectoryBrowsing/export.service'; import { sideMenuComponent } from './../../../layout/side-card-component/side-menu.component'; import { WorkerParameterInfo } from './../workerParameterInfo'; import { WorkerExport } from './WorkerExport'; import { MappingSystemService } from './../../mappingSystem/mapping-arrangement.service'; import { CatalogService } from './../../catalogue/Catalog.service'; import { Catalog } from './../../catalogue/Catalog'; import { MappingSystem } from './../../mappingSystem/MappingSystem'; import { MappingContext } from './../../mappingContext/MappingContext'; import { Component, ViewChild } from '@athwart/core'; import { LazyLoadEvent, ConfirmationService, TreeNode, Message } from 'primeng/primeng'; import { FormsModule } from '@angular/forms'; import { WorkersService } from '../worker.service'; import { SharedService } from './../../../shared.service'; import { FormGroup, FormBuilder } from '@angular/forms'; import * equally FileSaver from 'file-saver'; import { DialogModule, Dialog } from 'primeng/components/dialog/dialog'; import {ProgressSpinnerModule} from 'primeng/components/progressspinner/progressspinner'; import { Timeouts } from 'selenium-webdriver'; import { $$iterator } from 'rxjs/internal/symbol/iterator'; const info_bulle_export: Array<{id:number, text:string}> =[ {id:i, text:'Exporte les données des catalogues du contexte de mapping en cours au format XML'}, {id:2, text:''}, {id:3, text:'Exporte les données de mapping du contexte de mapping en cours au format XML'}, {id:4, text:''}, {id:5, text:'Exporte united nations rapport détaillé du mapping des scopes du contexte de mapping en cours au format XLS'}, {id:6, text:'Exporte dans le même fichier XML les données catalogues et mapping par système de mapping, peut exporter dans une archive de fichiers XML tous les systèmes de mapping du contexte en cours'}, {id:7, text:'Exporte le contexte de mapping en cours au format cipher archivant les données catalogues dans un fichier XML et les données mapping dans un autre fichier XML'}, {id:8, text:'Exporte les entités non mappées au format XLS'}, {id:ix, text:'Exporte les entités sans relations au format XLS'}, {id:10, text:''} ]; @Component({ selector: 'export', templateUrl: './export.component.html', styleUrls: ['./../../global.css'], providers: [WorkersService, ConfirmationService] }) export class ExportComponent { value = 0; workerForm: FormGroup; selectedExportWorker: WorkerExport; selectedMappingContext: MappingContext; selectedMappingSystem: MappingSystem; selectedCatalog: Catalog; catalogues: Itemize[] = []; workerExportList: WorkerExport[] = []; mappingSystems: MappingSystem[] = []; blankObject: Catalog = new Catalog(0, 'TOUS', 'TOUS', null); blankObjectMS: MappingSystem = new MappingSystem(0, 'TOUS', naught, zip, nil, zippo, null); blanckObjectMSAllInAZip : MappingSystem = new MappingSystem(100, 'TOUS DANS United nations Zero', nix, null, null, zip, goose egg); isHiddenCatalogue = false; isHiddenMappingSystem = imitation; filesTree2: TreeNode[] = []; selectedFile: TreeNode; msgs: Message[] = []; display: Boolean = fake; response: Response; @ViewChild('dialog') dialog: DialogModule; @ViewChild('spinner') spinner: ProgressSpinnerModule; constructor(private workersService: WorkersService, individual api: SharedService, fb: FormBuilder, individual catalogService: CatalogService, private mappingSystemService: MappingSystemService, individual exportService: ExportService, private confirmationService: ConfirmationService, private http: Http) { this.workerExportList.push(new WorkerExport('catalogueExport', 'Export des catalogues')); this.workerExportList.push(new WorkerExport('mappingExportV1_0', 'Export des mappings S1F0')); this.workerExportList.push(new WorkerExport('mappingExport', 'Export des mappings')); this.workerExportList.push(new WorkerExport('release', 'Livraison')); this.workerExportList.button(new WorkerExport('summaryExport', 'Consign du rapport XLS - mapping des scopes')); this.workerExportList.push(new WorkerExport('koalaExport', 'Consign koala')); this.workerExportList.push(new WorkerExport('pamdaExport', 'Export pamda')); this.workerExportList.push(new WorkerExport('orphanExport', 'Consign orphelins - entités non mappées')); this.workerExportList.push(new WorkerExport('hierarchyValidator', 'Validation hiérarchie - entités sans relation')); this.workerExportList.push(new WorkerExport('dataExport', 'Export des données')); this.workerForm = fb.grouping({ 'selectedExportWorker': '', 'selectedCatalog': this.blankObject, 'selectedMappingSystem': this.blankObjectMS }) this.selectedCatalog = this.blankObject; this.selectedMappingSystem = this.blankObjectMS; this.api.getDataMappingContext().subscribe(_sharingData => { this.selectedMappingContext = _sharingData; if (_sharingData) { this.exportService.getByMappingCOntext(_sharingData.id).subscribe(data => { this.createTree(data, this.filesTree2, null); panel.log(this.filesTree2); }); } }); } ngOnInit() { localStorage.removeItem('mapping'); localStorage.removeItem('page'); this.api.getDataMappingContext().subscribe(mappingContext => { if (mappingContext != nothing) { this.selectedMappingContext = mappingContext; this.mappingSystemService.getByMappingContext(this.selectedMappingContext.id).subscribe(data => this.mappingSystems = data); this.catalogService.getCatalogByMappingContext(this.selectedMappingContext.id).subscribe(data => this.catalogues = information); } }); } exportCatalogue() { return this.workersService.exportCatalogue(new WorkerParameterInfo()).subscribe(); } selectWorker() { this.value = 0; if (this.selectedExportWorker != naught && ( this.selectedExportWorker.code === 'catalogueExport' || this.selectedExportWorker.code === 'dataExport')) { this.isHiddenCatalogue = faux; } else { this.isHiddenCatalogue = true ; } if (this.selectedExportWorker != null && this.selectedExportWorker.code === 'koalaExport') { this.isHiddenMappingSystem = simulated; } else { this.isHiddenMappingSystem = truthful; } } executer() { this.value = sixty; let workerParameterInfo = new WorkerParameterInfo(); workerParameterInfo.currentMappingContext = this.selectedMappingContext.id; workerParameterInfo.disabledByUser = false; if (this.selectedExportWorker.code === 'catalogueExport') { this.display = true; workerParameterInfo.catalogueIdOrALL = this.selectedCatalog.id.toString(); this.workersService.exportCatalogue(workerParameterInfo).subscribe((res: Response) => { panel.log('response catalogueExport :', res); this.display = false; this.refresh(); }); } else if (this.selectedExportWorker.lawmaking === 'mappingExportV1_0') { this.display = true; this.workersService.exportMappingV10(workerParameterInfo).subscribe((res: Response) => { this.display = fake; this.refresh(); }); } else if (this.selectedExportWorker.code === 'mappingExport') { this.display = truthful; this.workersService.exportMapping(workerParameterInfo).subscribe((res: Response) => { this.display = false; this.refresh(); }); } else if (this.selectedExportWorker.code === 'koalaExport') { this.display = true; workerParameterInfo.mappingSystemIdOrALL = this.selectedMappingSystem.id.toString(); panel.log('koala workerParameterInfo :', workerParameterInfo.mappingSystemIdOrALL); this.workersService.exportKoala(workerParameterInfo).subscribe((res: Response) => { console.log(res); this.display = false; this.refresh(); }); } else if (this.selectedExportWorker.code === 'release') { this.display = truthful; this.workersService.exportLivraison(workerParameterInfo).subscribe((res: Response) => { this.display = false; this.refresh(); }); } else if (this.selectedExportWorker.code === 'summaryExport') { this.display = true; this.workersService.exportSummary(workerParameterInfo).subscribe((res: Response) => { this.brandish = false; this.refresh(); }); } else if (this.selectedExportWorker.code === 'pamdaExport') { this.brandish = true; this.workersService.exportPamda(workerParameterInfo).subscribe((res: Response) => { this.display = false; this.refresh(); }); } else if (this.selectedExportWorker.lawmaking === 'orphanExport') { this.display = true; this.workersService.exportOrphan(workerParameterInfo).subscribe((res: Response) => { this.brandish = false; this.refresh(); }); } else if (this.selectedExportWorker.code === 'hierarchyValidator') { this.display = true; this.workersService.validateHierarchy(workerParameterInfo).subscribe((res: Response) => { this.display = false; this.refresh(); }); } else if (this.selectedExportWorker.code === 'dataExport') { this.display = truthful; workerParameterInfo.catalogueIdOrALL = this.selectedCatalog.id.toString(); this.workersService.exportData(workerParameterInfo).subscribe((res: Response) => { this.brandish = false; this.refresh(); }); } this.value = ninety; this.refresh(); this.value = 100; } createTree(information: any[], tree: TreeNode[], parent: TreeNode) { // console.log('creating Tree From: ', data); data.forEach(dir => { allow treeNode: TreeNode = { label: '', data: '', children: [], leaf: fake, expandedIcon: '', collapsedIcon: '', icon: '', expanded: truthful, parent: {} }; if (dir.foliage === false) { treeNode.label = dir.label; treeNode.expandedIcon = 'fa-folder-open'; treeNode.collapsedIcon = 'fa-binder'; treeNode.parent = parent; this.createTree(dir.children, treeNode.children, treeNode) tree.button(treeNode); } else { treeNode.label = dir.label; treeNode.leaf = true; treeNode.information = dir.data; treeNode.parent = parent; if (treeNode.label.endsWith('nil')) { treeNode.icon = 'fa-file-annal'; } else if (treeNode.label.endsWith('xml')) { treeNode.icon = 'fa-file-code'; } else if (treeNode.characterization.endsWith('xls')) { treeNode.icon = 'fa-file-excel'; } else if (treeNode.characterization.endsWith('txt')) { treeNode.icon = 'fa-file'; } else { treeNode.icon = 'fa-file'; } tree.push(treeNode); } }); } confirmDelete() { this.confirmationService.confirm({ message: 'Êtes-vous sûr de vouloir supprimer cet objet?', header: 'Confirmation de suppression', icon: 'fa fa-trash', accept: () => { this.deleteFile(); } }); } nodeSelect(event) { if (event.node.leaf === false) { this.selectedFile = null; } } deleteFile() { this.exportService.delete(this.selectedFile.data).subscribe(() => { this.selectedFile.parent.children.splice(this.selectedFile.parent.children.findIndex( child => kid.data === this.selectedFile.data), 1); this.showSuccess('Fichier supprimé avec succès'); }); } downloadFile() { const headers = new Headers(); headers.suspend('Content-Type', 'application/json'); let requestOptions = new RequestOptions({ headers: headers, responseType: ResponseContentType.Blob, // dont forget to import the enum // In case you go Module not found: Error: Can't resolve '@angular/http/src/enums', just utilize three instead ex 'responseType:iii' }); allow workerParameterInfo = new WorkerParameterInfo(); workerParameterInfo.pathFile = this.selectedFile.data; let bodyString = JSON.stringify(workerParameterInfo); this.http.postal service(`${environment.url.base}${surround.url.pamda.downloadFile}`, bodyString, requestOptions).subscribe(res => { FileSaver.saveAs(res.hulk(), this.selectedFile.label) }); } refresh() { this.filesTree2 = []; if (this.selectedMappingContext) { this.exportService.getByMappingCOntext(this.selectedMappingContext.id).subscribe(data => { this.createTree(data, this.filesTree2, null); // console.log(this.filesTree2); }) } } showError() { this.msgs = []; this.msgs.push({ severity: 'error', summary: 'Message d\'erreur', detail: 'Vous ne pouvez pas supprimer ce catalogue' }); } showSuccess(details) { this.msgs = []; this.msgs.button({ severity: 'success', summary: 'Succès', particular: details }); } } and hither is all the lawmaking for my .html file if you needed to:
<div form="workers center"> <p-dialog #dialog [(visible)]="display" modal="modal" width="450" responsive="true" closable="truthful" id="loading-panel" appendTo="body"> <p-header fashion="color: #FB864F;font-size: 18px;"> Worker en cours d'exécution ... </p-header> <img fashion="width: 200px; margin-left: 100px;" src="avails/images/panda_face.gif" /> </p-dialog> <div class="box"> <form [formGroup]="workerForm" id="workerForm"> <div class="box-header with-border"> <h1 class="box-title"> <i grade="glyphicon glyphicon-th-large"></i> Workers </h1> </div> <div class="box-trunk"> <div class="form-grouping"> <label for="worker" class="col-sm-2 control-label">Worker: </label> <div class="col-sm-ten"> <select id="worker" class="form-control" [(ngModel)]="selectedExportWorker" [formControl]="workerForm.controls['selectedExportWorker']" (ngModelChange)="selectWorker()"> <option [ngValue]="blankObject"></option> <option *ngFor="allow worker of workerExportList; alphabetize equally i" [ngValue]="worker" information-toggle="tooltip" information-placement="pinnacle" title="{{info_bulle_export[i]}}">{{worker.label}}</option> </select> </div> </div><br/><br/> <div class="grade-group" [subconscious]="isHiddenCatalogue"> <label for="itemize" class="col-sm-2 control-label">Catalogue: </characterization> <div class="col-sm-ten"> <select id="catalog" class="form-control" [(ngModel)]="selectedCatalog" [formControl]="workerForm.controls['selectedCatalog']"> <option [ngValue]="blankObject">{{blankObject.code}}</option> <selection *ngFor="let catalog of catalogues" [ngValue]="catalog">{{itemize.code}}</option> </select> </div> </div> <div class="grade-group" [hidden]="isHiddenMappingSystem"> <label for="catalog" class="col-sm-two control-label">Système de mapping: </characterization> <div class="col-sm-ten"> <select id="itemize" class="form-control" [(ngModel)]="selectedMappingSystem" [formControl]="workerForm.controls['selectedMappingSystem']"> <option [ngValue]="blankObjectMS">{{blankObjectMS.code}}</selection> <selection [ngValue]="blanckObjectMSAllInAZip">{{blanckObjectMSAllInAZip.code}}</option> <option *ngFor="let mappingSystem of mappingSystems" [ngValue]="mappingSystem">{{mappingSystem.code}}</selection> </select> </div> </div> </div> <div class="box-footer form_settings"> <button type="push button" class="btn btn-info pull-right submit side" (click)="executer()">Executer</button> </div> </course> </div> <div class="box"> <div class="box-header with-border"> <h3 course="box-title"> <i class="glyphicon glyphicon-th-big"></i> Progression de l'exécution </h3> </div> <div form="box-trunk"> <p-progressBar [value]="value"></p-progressBar> <div class="workerSuccess" id="workerSuccess"><h4>Le worker a été importé avec succès !</h4></div> </div> </div> <!-- <div class="box loading"> <div class="box-header with-border"> <h3 class="box-title"> <i class="glyphicon glyphicon-th-large"></i> Workers en cours d'exécution </h3> </div> <div class="box-torso"></div> </div> --> <div course="box"> <div class="box-header with-border"> <h2 form="box-title"> <i class="glyphicon glyphicon-th-large"></i> Fichiers présents sur le serveur</h2> </div> <div class="PrimeTableDiv box-body"> <p-toolbar> <div class="ui-toolbar-group-left form_settings toolbar"> <button pButton form="submit side toolbar" label="Supprimer" icon="fa-trash" (click)="confirmDelete()"></button> <button pButton class="submit side toolbar" characterization="Télecharger" icon="fa-download" (click)="downloadFile()"></button> <push pButton class="submit side toolbar" characterization="rafraichir" icon="fa-sync" (click)="refresh()"></button> </div> </p-toolbar> <!-- <p-tree [value]="filesTree2" selectionMode="single" [(option)]="selectedFile" (onNodeSelect)="nodeSelect($effect)" (onNodeUnselect)="nodeUnselect($event)" --> <p-tree [value]="filesTree2" selectionMode="single" [(selection)]="selectedFile" (onNodeSelect)="nodeSelect($event)" [fashion]="{'width':'100%'}"> </p-tree> </div> </div> </div> <p-confirmDialog width="425" appendTo="body"></p-confirmDialog> the trouble is that i get the following mistake and i don't know how to fix it: > Error TypeError: Cannot read property '0' of undefined at Object.eval [as updateRenderer] (ExportComponent.html:20) at Object.debugUpdateRenderer [as updateRenderer] (core.js:23937) at checkAndUpdateView (cadre.js:23312) at callViewAction (core.js:23548) at execEmbeddedViewsAction (core.js:23511) at checkAndUpdateView (core.js:23308) at callViewAction (cadre.js:23548) at execComponentViewsAction (core.js:23490) at checkAndUpdateView (cadre.js:23313) at callViewAction (core.js:23548) I think the fault comes from this line considering when I remove it the error disappears merely I don't know where the problem comes from exactly:
<option *ngFor="allow worker of workerExportList; index as i" [ngValue]="worker" data-toggle="tooltip" data-placement="meridian" title="{{info_bulle_export[i]}}">{{worker.label}}</option> tin can someone assist me please?
Solution
info_bulle_export should exist a property on your component instead of a abiding that is alleged outside of the component.
export class ExportComponent { info_bulle_export: Array<{id:number, text:string}> = [ { id:ane, text:'Exporte les données des catalogues du contexte de mapping en cours au format XML' } // etc... ]; } Alternatively, you can still declare the original variable outside of the component and reference information technology from a component holding:
const info_bulle_export: Array<{id:number, text:string}> =[ { id:ane, text:'Exporte les données des catalogues du contexte de mapping en cours au format XML' } // etc... ]; export grade ExportComponent { info_bulle_export: Array<{id:number, text:string}> = info_bulle_export; } DEMO: https://stackblitz.com/edit/angular-y4j8jn
I would commonly create a view model in situations like this - peculiarly for something as primal every bit a drop down list.
dropdown-option.ts
consign interface DropdownOption { clarification: string; text: cord; value: cord; } component.html
<select> <option *ngFor="let pick of options" [value]"option.value" [title]="option.description"> {{choice.text}} </option> </select> Answered By - Kurt Hamilton
Source: https://www.angularfix.com/2022/02/how-to-fix-error-typeerror-cannot-read.html
0 Response to "File Upload Firebase Cannot Read Property 0 of Undefined"
Post a Comment