Angular 6-從http可觀察到的圖像在視圖中未更新

Question

我正在努力使我的代碼在使用角度內存數據模擬器的地方正常工作，並嘗試通過http通過observable加載它。 我的問題是，所有文本字段均以可觀察到的返回數據更新，但圖像變為空白。 看起來組件上給出的圖像固定在負載上，以后無法更新。 我可以看到控制台日志，並且返回了正確的數據，但是它沒有反映在組件上。

您能否在這里幫助我動態加載此圖像。 目前，我將圖像保留在本地資源文件夾下，但稍后將從真實的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);
  }

}

橫幅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
      };

Answer 1

問題是，您不能使用<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="">