要实现Angular 8一次只显示一张图片,可以使用ngFor指令和条件判断语句来实现。
首先,在组件的HTML模板中,使用ngFor指令来遍历图片列表,并使用ngIf指令和条件判断语句来判断当前图片是否为要显示的图片。示例如下:
在组件的Typescript文件中,定义一个变量currentImage来表示当前要显示的图片,并在ngOnInit方法中初始化该变量。示例如下:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-image-gallery',
templateUrl: './image-gallery.component.html',
styleUrls: ['./image-gallery.component.css']
})
export class ImageGalleryComponent implements OnInit {
images: string[] = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
currentImage: string;
ngOnInit() {
this.currentImage = this.images[0]; // 初始化为第一张图片
}
}
这样,每次只会显示currentImage变量所指定的图片。可以通过更改currentImage变量的值来切换要显示的图片。
注意:需要将images数组中的图片路径替换为实际的图片路径。