I have an object, but I can only save the first item from this object.
Interface:
export interface PhotoToCreate {
albumName: string;
albumTitle: string;
ImageNameO : string;
imageNameT : string;
}Component
import { Component, OnInit, Injectable } from '@angular/core';
import { PhotoToCreate } from '../_Classes/photo-to-create.model';
import { PhotoModule } from '../_Classes/photo-module.model';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
@Component({
selector: 'app-alerts',
templateUrl: './alerts.component.html',
styleUrls: ['./alerts.component.scss']
})
export class AlertsComponent implements OnInit {
public isCreate: boolean;
public albumName: string;
public albumTitle: string;
public photo: PhotoToCreate;
public photos: PhotoModule[] = [];
public response:{dbpathsasstring: ''}
constructor(private http: HttpClient) { }
ngOnInit() {
this.isCreate = true;
}
public spliturl = (serverss: string)=> {
if (serverss.includes(",")) {
for(let i = 0; serverss.length; i++) {
console.log(i)
var serpatharr=serverss.split(',');
serverss=serpatharr[i];
}
return serverss;
}
}
public onCreate = () => {
this.photo = {
albumName: this.albumName,
albumTitle: this.albumTitle,
ImageNameO : this.spliturl(this.response.dbpathsasstring),
imageNameT : this.spliturl(this.response.dbpathsasstring)
}
this.http.post('https://localhost:44318/api/PhotosAlbums', this.photo)
.subscribe(res => {
this.getUsers();
this.isCreate = false;
});
}
private getUsers = () => {
this.http.get('https://localhost:44318/api/PhotosAlbums')
.subscribe(res => {
this.photos = res as PhotoModule[];
});
}
public returnToCreate = () => {
this.isCreate = true;
}
public uploadFinished = (event) => {
this.response = event;
}
public createImgPath = (serverPath: string) => {
if(serverPath.includes(",")) {
var serverPathArr = serverPath.split(',');
serverPath = serverPathArr[0];
}
return `https://localhost:44318/${serverPath}`;
}
}
<article class="container container-fluid">
<section class="create" *ngIf="isCreate">
<h1>Create User</h1>
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="albumName" name="albumName" placeholder="Enter your name" [(ngModel)]="albumName">
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="text" class="form-control" id="albumTitle" name="albumTitle" placeholder="Enter your address" [(ngModel)]="albumTitle">
</div>
<app-upload (onUploadFinished)="uploadFinished($event)"></app-upload>
<div class="row">
<div class="offset-md-5 col-md-2">
<button type="button" class="btn btn-primary" (click)="onCreate()">Create </button>
</div>
</div>
</form>
</section>
<section class="users" *ngIf="!isCreate">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Image</th>
<th scope="col">Name</th>
<th scope="col">Address</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let photo of photos">
<td><img [src]="createImgPath(photo.ImageNameO)" alt="profile picture" style="width:60px; height:60px;"></td>
<td>{{photo.albumName}}</td>
<td>{{photo.albumTitle}}</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="offset-md-10 col-md-2">
<button type="button" class="btn btn-primary" (click)="returnToCreate()">New User</button>
</div>
</div>
</section>
</article>Returned path from API: Resources\Images\c7ef86f6-a032-4124-9327-142f0b1e99371.png,Resources\Images\4801b60c-7d82-4e51-aab2-db2da0f9647c2.png
This function saves the first image
public spliturl = (serverss: string)=> {
if (serverss.includes(",")) {
var serpatharr=serverss.split(',');
serverss=serpatharr[0];
}
return serverss;
}
The path is stored in both fields Resources\Images\c7ef86f6-a032-4124-9327-142f0b1e99371.png,Resources\Images\4801b60c-7d82-4e51-aab2-db2da0f9647c2.png
However, using this method to split the path
only the first image is saved in ImageNameO = Resources\Images\c7ef86f6-a032-4124-9327-142f0b1e99371.png
The second field cannot save the path, imageNameT = Resources\Images\4801b60c-7d82-4e51-aab2-db2da0f9647c2.png saved as null
How can I save the images with correct paths?
Say:
ImageNameO = Resources\Images\c7ef86f6-a032-4124-9327-142f0b1e99371.png
ImageNameT = Resources\Images\4801b60c-7d82-4e51-aab2-db2da0f9647c2.png