Java служба отправляет данные, но в Angular компонентах TypeScript заполняется только одно поле из возвращенного объекта

Question

Это возвращаемый класс, возвращается несколько экземпляров Photo:

export class Photo {
    id: string;
    photo: string;
    uploadtime: Date;
    restricted: boolean;
}

Сервис:

  public findByIds(idz: Number[]): Observable<Photo[]> {
    let paramz = new HttpParams();
    paramz= paramz.append('ids',idz.join(','));
    const newLocal = this.http.get<Photo[]>(this.photosUrl, {params: paramz});
    return newLocal;
  }

Компонент:

 photoz: Array<Photo>;

  listPhotz() {
    const idz=this.photoids.slice(this.counter,this.counter+10);
    this.photoService.findByIds(idz).subscribe(data => {this.photoz = data});
    this.counter=this.counter+10;
  }

HTML:

    <tbody>
        <tr *ngFor="let pht of photoz">
            <td><img [src]="photo" /></td>
            <td>{{ pht.id }}</td>
            <td>{{ pht.uploadTime }}</td>
        </tr>
    </tbody>

Но только pht.id имеет значения, остальные пусты. Я протестировал остальные службы с помощью curl, а остальные НЕ пусты.

Кстати, как я могу отобразить фотографию (строка base64) как изображение в пользовательском интерфейсе? И почему, например, у photoz нет length (error, no length property, а Google говорит, что это должно быть у массивов ts?

Answer 1

Свойство времени загрузки, вероятно, не отображается из-за верблюжьей строки "uploadTime". У вашего класса модели Photo есть свойство uploadtime

Как вы можете отобразить строку изображения base64? добавьте к нему свойство data uri:

this.imageUrl = 'data:image/jpeg;base64,' + imageBase64String;

Наконец установите его с помощью angular привязки данных

<img src={{imageUrl}} />