0

我正在努力使我的代码在我使用角度内存数据模拟器并尝试使用 http 通过 observable 加载它的情况下工作。我的问题是所有文本字段都随着可观察返回数据而更新，但图像变为空白。看起来好像在组件处给出的图像在加载时是固定的，以后无法更新。我可以看到控制台日志并返回正确的数据，但它没有反映在组件上。

你能帮我动态加载这张图片吗？现在我将图像保存在本地资产文件夹下，但稍后它将从真正的 api 中读取。

横幅.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);
        });
  }

}

横幅服务.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;
}

横幅.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
      };
4

1 回答 1

0

问题是，你不能<section />用来加载图像，你可以使用<img src="..." />or <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="">
于 2018-09-15T04:42:09.577 回答