如何不使用* ngFor显示图像

Question

https://stackblitz.com/edit/angular-76v5xt?file=src%2Fapp%2Fapp.component.html

在上面的stackblitz链接中，我尝试不使用ngFor来显示所有图像，但是不起作用。

请帮助。

Answer 1

设置您的html

<div>
  <img src="{{products[0]}}">
</div>

Answer 2

另一种方法是，您可以在app.component.ts中创建模板。并且可以在父div上使用[innerHTML]标签。https://stackblitz.com/edit/angular-grk7qd

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  products = ["https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg", "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg", "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"];
  _myImagesHTML;
  constructor() {
    this._myImagesHTML = "";
    for (let i = 0; i < this.products.length; i++) {
      this._myImagesHTML += "<img src='" + this.products[i] + "'></img>";
    }
  }
}

<div [innerHTML]="_myImagesHTML">
</div>