Angular 角度：如何将服务中的数据使用到组件html中

我正在尝试使用一个组件提供的服务

我有以下服务：

import { Injectable } from '@angular/core';
import { PicItem } from './Models/Pictures';

@Injectable()
export class PicturesService {

  private readonly time = 10000;
  public image1:string = "";
  public image2:string = "";
  private _picList: string[];
  private index: number = 0;

  constructor() { 
       this._picList = [
       "",
       ""
  ]

      setInterval(() => {
        this.image1 = this.getImage();
        this.image2 = this.getImage();
      }, this.time);
  }

 getImage(){
    return this._picList[this.index++];
  }

}

此服务应切换image1和image2中的两个图片url

现在我有一个组件，我想调用这个服务，并从image1和image2获取URL

在组件html文件中使用image1/2 URL的正确方法是什么

我试着做一些类似的事情

<img src = {{image1}}>

据我所知，从服务中获取image1的值

---

问题是如何在HTML文件中使用此值。

您可以在模板中使用组件属性：

export class GalleryComponent implements OnInit {
  pic1:any;
  constructor(public pictureService: PicturesService) { 
    this.pic1 = this.pictureService.image1;
  }

<img src="{{pictureService.image1}}">

或使用模板中的服务：

export class GalleryComponent implements OnInit {
  pic1:any;
  constructor(public pictureService: PicturesService) { 
    this.pic1 = this.pictureService.image1;
  }

<img src="{{pictureService.image1}}">

---

image1需要是组件的属性，而不是服务的属性。当您从组件调用服务时，您将getImage的返回值分配给组件的属性image1I编辑问题。我不相信是这样。不是var pic1，但可能是这个。image1=。。。最好使用ngOnit，并在构造函数上方声明