我有对象,但不能保存该对象的所有项目,只能保存第一个对象

问题描述 投票:0回答:1

我有对象,但不能保存该对象的所有项目,只能保存第一个对象。

第一个界面:

export interface PhotoToCreate {
 
     albumName: string;
   albumTitle: string;
   ImageNameO : string;
 imageNameT : string;
  



}

第二部分

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 => {
      // debugger;
       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}`;
    }
    

}


 
html模板
<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>

api返回的路径Resources \ Images \ c7ef86f6-a032-4124-9327-142f0b1e99371.png,Resources \ Images \ 4801b60c-7d82-4e51-aab2-db2da0f9647c2.png

并尝试编码但不起作用

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
     }
  }
  
    

我在ImageNameO中保存此路径Resources \ Images \ c7ef86f6-a032-4124-9327-142f0b1e99371.png,Resources \ Images \ 4801b60c-7d82-4e51-aab2-db2da0f9647c2.png

但是使用此方法分割路径

并将第一张图像保存在ImageNameO = Resources \ Images \ c7ef86f6-a032-4124-9327-142f0b1e99371.png

在此文件中无法保存路径imageNameT = Resources \ Images \ 4801b60c-7d82-4e51-aab2-db2da0f9647c2.png保存为空

如何保存图片说ImageNameO =资源\图像\ c7ef86f6-a032-4124-9327-142f0b1e99371.png

ImageNameT = Resources \ Images \ 4801b60c-7d82-4e51-aab2-db2da0f9647c2.png

javascript angular typescript
1个回答
0
投票

[第一件事,您必须检查spliturl功能。

[检查spliturl正常后],然后:

如果您的spliturl函数返回字符串

,则它应该可以正常工作。

同时:

如果您的spliturl函数返回字符串数组

然后您应该更改PhotoToCreate接口:

export interface PhotoToCreate {
  albumName: string;
  albumTitle: string;
  ImageNameO : Array<string>;
  imageNameT : Array<string>;
}
© www.soinside.com 2019 - 2024. All rights reserved.