У меня есть приложение Angular 2 с онлайн-формой, которая загружает документ в Firestore, а затем обновляет базу данных Cloud Firestore.Кажется, все работает нормально, за исключением первой загрузки никогда не работает.Как только я загружаю второй документ, он соответствующим образом обновляет базу данных.Я не могу отладить, любая помощь будет принята с благодарностью.
new-list.component.ts
export class NewListComponent implements OnInit {
uploadPercent: Observable<number>;
downloadURL: Observable<string>;
uploadProgress: Observable<number>;
ref: AngularFireStorageReference;
task: AngularFireUploadTask;
uploadState: Observable<string>;
id:string;
fileName:string;
newImageObjects: Imageroo[];
imgObsArray: string[];
imgFileNameArray: string[];
imgFileNameArrayLink: string[];
newImageObject: Imageroo;
lister:Listeroo;
public userTwo: Observable<User>;
public userThree: User;
listName:string;
stringo:string;
linkeroo;
file;
constructor(private afStorage: AngularFireStorage, private service: MyServiceService, public auth: AuthService) {
this.userTwo = this.auth.getUser();
}
ngOnInit() {
this.imgObsArray = new Array<string>();
this.downloadURL = new Observable();
this.ref = this.afStorage.ref("1234");
this.imgFileNameArray = new Array<string>();
this.imgFileNameArrayLink = new Array<string>();
this.newImageObject = <Imageroo>{};
this.newImageObjects = new Array<Imageroo>();
this.lister = <Listeroo>{};
this.auth.getUser().subscribe(val => {
this.userThree = val;
console.log(this.userThree.displayName + " YO YO YO YO ");
})
}
uploadFile(event) {
this.file = event.target.files[0];
this.fileName = this.file.name;
this.newImageObject.filename = this.fileName;
console.log(this.fileName + " THIS IS THE FILE NAME")
this.imgFileNameArray.push(this.fileName)
const id = Math.random().toString(36).substring(2);
this.ref = this.afStorage.ref(id);
this.task = this.ref.put(event.target.files[0]);
this.uploadState = this.task.snapshotChanges().pipe(map(s => s.state));
this.uploadProgress = this.task.percentageChanges();
this.task.snapshotChanges().pipe(
finalize(() =>
this.downloadURL = this.ref.getDownloadURL())
).subscribe();
this.downloadURL.subscribe((value) => {
this.imgObsArray.push(value),
this.newImageObject.imageUrl = value,
this.newImageObject.filename = this.fileName,
this.newImageObjects.push(this.newImageObject),
this.imgFileNameArrayLink.push(this.newImageObject.imageUrl)
})
}
testFunc(){
this.linkeroo = this.ref.getDownloadURL().subscribe((value) => {
this.stringo = value;
console.log( this.stringo + " !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!")
}
);
}
ngOnDestroy(){
this.imgObsArray.length = 0;
this.imgFileNameArray.length = 0;
}
getListName(name:string){
this.listName = name;
console.log("THIS IS THE LIST NAME " + this.listName + " ***********************************************************************")
}
completeList(){
const id = Math.random().toString(36).substring(2);
this.lister.name = "Nameroo";
this.lister.id = id;
this.lister.uid = this.userThree.uid;
this.lister.urls = this.imgObsArray.map(x => x);
this.service.addLists(this.lister);
}
}
new-list.component.html
<html>
<body class="background_section">
<div class="container">
<div class="row">
<div class="col-md-6 col-centered text-center">
<br>
<div class="upload-card">
<div class="card-body">
<h3 class="fancyFont" style="text-align: center;">Name your list</h3>
<h5 class="card-title fancyFontTwo" style="text-align: center;">Step 1 of 3</h5>
</div>
</div>
<br>
<div class="upload-card">
<div class="card-body">
<h3 class="fancyFont" style="text-align: center;">Upload files to list</h3>
<h5 class="card-title fancyFontTwo" style="text-align: center;">Step 2 of 3</h5>
<br>
<br>
<button mat-button (click)="fileInput.click()">
<span>Select</span>
<input #fileInput type="file" (change)="uploadFile($event)" style="display:none;" accept=".png,.jpg" />
</button>
<br><br>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" [style.width]="(uploadProgress | async) + '%'" [attr.aria-valuenow]="(uploadProgress | async)" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<br>
<div *ngIf="downloadURL | async; let downloadSrc;" class="alert alert-info" role="alert">
File uploaded successfully <a [href]="downloadSrc"></a>
<p>
<mat-icon>cloud_done</mat-icon>
</p>
<img [src]="downloadSrc">
</div>
<br>
<div class="btn-group" role="group" *ngIf="uploadState | async; let state">
<a (click)="completeList()" mat-button>Complete</a>
</div>
</div>
</div>
<div>
<div *ngFor="let obs of imgObsArray; let i = index">
<mat-card class= "example-card">
<mat-card-header>
<mat-card-title>{{ imgFileNameArray[i] }}
<img class="headShot" [src]="obs">
</mat-card-title>
<mat-card-subtitle>Upload successful</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
</mat-card-content>
<mat-card-actions style="margin-left: ;">
<button mat-button >DELETE</button>
</mat-card-actions>
</mat-card>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
my-service.service.ts
addLists(list:Listeroo){
console.log("THE ADD LISTS FUNCTION WORKED PROPERLY")
this.db.collection('lists').add(list);
}
app.model.ts
export interface Task {
content: number;
}
export interface Options {
id: number;
name:string;
rating:number;
photoUrl:string;
referenceId:string;
}
export interface User {
id: number;
image:string;
rating:number;
}
export interface Imageroo {
filename: string;
imageUrl: string;
}
export interface Listeroo {
id: string;
uid: string;
urls: string[];
name: string;
}