Angular 6 - изображение загружено из http, наблюдаемое не обновляется в представлении - PullRequest
Новая
       26

Angular 6 - изображение загружено из http, наблюдаемое не обновляется в представлении

0 голосов
/ 14 сентября 2018

Я изо всех сил пытаюсь заставить мой код работать там, где я использую симулятор угловых данных в памяти и пытаюсь загрузить его, используя http через observable.Моя проблема в том, что все текстовые поля обновляются, поскольку наблюдаемые данные возвращаются, но изображение становится пустым.Похоже, что изображение, данное в компоненте, зафиксировано при загрузке и не может быть обновлено позже.Я вижу журнал консоли и возвращаются правильные данные, но они не отражаются на компоненте.

Не могли бы вы мне помочь, чтобы загрузить это изображение динамически.На данный момент я сохранил изображение локально в папке assets, но позже оно будет считано из реального API.

banner.component.ts 

import { Component, OnInit } from '@angular/core';

import { BannerDS } from './banner-ds';
import { BannerService } from './banner.service';


@Component({
  selector: 'app-banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.css']
})
export class BannerComponent implements OnInit {

  bannerLoaded = false;
  banner: BannerDS;

  constructor(private bannerService: BannerService) { }

  ngOnInit() {
    this.getBanner();
  }

  getBanner(): void {
    this.bannerService.getBanner()
        .subscribe(banner => {
          this.banner = banner;
          this.bannerLoaded = true;
          console.log(banner);
        });
  }

}

banner.service.ts 

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';

import { BannerDS } from './banner-ds';


@Injectable({
  providedIn: 'root'
})

export class BannerService {

  private bannerUrl = 'api/banner';  // URL to web api

  constructor(private http: HttpClient) { }

  /** GET heroes from the server */
  getBanner(): Observable<BannerDS> {
    return this.http.get<BannerDS>(this.bannerUrl);
  }

}

banner-ds.ts 

export interface BannerDS {
    id: number;
    date: string;
    from: string;
    quote: string;
    image: string;
    likes: number;
    comments_count: number;
}

banner.component.html 

<!-- start banner Area -->
<section class="banner-area relative" id="home" data-parallax="scroll" attr.src="{{banner?.image}}" *ngIf="bannerLoaded">
<div class="overlay-bg overlay"></div>
<div class="container">
    <div class="row fullscreen">
        <div class="banner-content d-flex align-items-center col-lg-12 col-md-12">
            <h1>
                {{banner?.quote}}
                <!-- &ldquo;The world is a book<br>
                and those who do not travel read only one page.&rdquo;<br>
                - Augustine of Hippo -->
            </h1>
        </div>  
        <div class="head-bottom-meta d-flex justify-content-between align-items-end col-lg-12">
            <div class="col-lg-6 flex-row d-flex meta-left no-padding">
                <p><span class="lnr lnr-heart"></span> {{banner?.likes}}</p>
                <p><span class="lnr lnr-bubble"></span> {{banner?.comments_count}}</p>
            </div>
            <div class="col-lg-6 flex-row d-flex meta-right no-padding justify-content-end">
                <div class="user-meta">
                    <h4 class="text-white">{{banner?.from}}</h4>
                    <p>{{banner?.date}}</p>
                </div>
                <img class="img-fluid user-img" src="./assets/img/afsar.jpg" alt="">
            </div>
        </div>                                              
    </div>
</div>
</section>
<!-- End banner Area -->

баннер JSON 

const banner = { id: 11,
        date: '15 April, 2018 12:46 pm',
        from: 'Afsar Imam',
        quote: 'The world is a book and those who do not travel read ony one page. - Augustine of Hippo',
        image: 'src/assets/img/main-bg2.jpg',
        likes: 15,
        comments_count: 6
      };

1 Ответ

0 голосов
/ 15 сентября 2018

Дело в том, что вы не можете использовать <section /> для загрузки изображения, вы можете использовать <img src="..." /> или <picture > <source srcset="..." /> </picture>. Вот почему вы получаете сообщение об ошибке: 

Uncaught Error: Template parse errors: Can't bind to 'image-src' since it isn't a known property of 'section

В любом случае, я думаю, вы хотите загрузить изображение на элемент <img />, который у вас уже есть: 

<img class="img-fluid user-img" src="{{banner?.image}}" alt="">
...