Question

嗨，美好的一天，我仍然是角度2的新手，对不起，如果你看到一些不好的做法。

我停留3天尝试从我的猫头鹰旋转木马中的对象加载动态图像，我从数据库中获取了我的图像名称。

我按照这个例子https://plnkr.co/edit/HV6MNbC3vE04P9q0QnPv?p=preview 好，我不能从阵列加载img，但当我尝试加载我的图像时，不能正常工作。

这是我的代码：

＆＃13;

import { Component, OnInit } from '@angular/core';

import { TouristZoneModel } from './../shared/tourist-zone.model';
import { TouristZoneService } from './../shared/tourist-zone.service';

@Component({
  selector: 'tourist-zone-list',
  templateUrl: 'app/tourist-zones/tourist-zone-list/tourist-zone-list.component.html'
})

export class TouristZoneListComponent implements OnInit {
  touristZones: TouristZoneModel[] = [];
  pathImg = '/app/assets/images/';
  images: Array<string> = ['sports', 'abstract', 'people', 'transport', 'city', 'technics', 'nightlife', 'animals'];

  constructor(
    private touristZoneService: TouristZoneService) { }

  ngOnInit(): void {
    this.touristZoneService.getTouristZones(this.provincePathImg)
      .then(tz => this.touristZones = tz);
  }
}

＆＃13;

<h1>Hello {{name}}</h1>
<div>
  <h3>Sample</h3>
  <owl-carousel [options]="{navigation: false, pagination: true, rewindNav : false, lazyLoad : true}">
    <div *ngFor="let touristZone of touristZones">
      <img [src]="touristZone.images[0].name" [alt]="touristZone.name" />
    </div>
  </owl-carousel>
  <h3>Sample 3</h3>
  <owl-carousel [options]="{navigation: false, pagination: true, rewindNav : false}">
    <div *ngFor="let img of images">
      <img src="http://lorempixel.com/400/200/{{img}}" />
    </div>
  </owl-carousel>
</div>

＆＃13;

服务：

＆＃13;

import { Injectable } from '@angular/core';
import { Http, URLSearchParams } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { TouristZoneModel } from './tourist-zone.model';
import { TOURISTZONES } from './../../shared/constants';

@Injectable()

export class TouristZoneService {

  constructor(private http: Http) { }

  getTouristZones(provincePathImg: string): Promise<TouristZoneModel[]> {
    let params = new URLSearchParams();
    params.set('provincePathImg', provincePathImg);
    return this.http.get(TOURISTZONES, { search: params })
      .toPromise()
      .then(response => {
        return response.json() as TouristZoneModel[];
      })
      .catch(this.handleError);
  }
  
  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
  }
}

＆＃13;

猫头鹰组件：

＆＃13;

import {Component, Input, ElementRef, HostBinding, AfterViewInit, OnDestroy} from '@angular/core';
declare var jQuery: any;
import 'owl-carousel';

@Component({
  selector: 'owl-carousel',
  template: `<ng-content></ng-content>`
})

export class OwlCarouselComponent implements OnDestroy, AfterViewInit {
  @HostBinding('class') defaultClass = 'owl-carousel owl-theme';
  @Input() options: Object;

  $owlElement: any;
  defaultOptions: any = {};

  constructor(private elRef: ElementRef) { }

  ngAfterViewInit() {
    for (let key of Object.keys(this.options)) {
      this.defaultOptions[key] = this.options[key];
    }

    this.$owlElement = jQuery(this.elRef.nativeElement).owlCarousel(this.defaultOptions);
  }

  ngOnDestroy() {
    this.$owlElement.data('owlCarousel').destroy();
    this.$owlElement = null;
  }
}

＆＃13;

以下是我在Chrome开发工具中看到的内容，Sample是带有图像名称的对象，Sample 3是带有图像的数组。

这是渲染的图像。我的图像没有猫头鹰旋转木马的功能，而且是另一个

使用Angular 2

0 个答案: