angular计时器切换图片和map存储

说明：最近碰到一个需求，纯代码实现轮播图切换的功能，就是开启图片轮播循环和关闭图片轮播循环，可以控制图片切换秒数，把后端拿出来的数据，存储到map中，然后通过切换key，实现图片切换功能

step1:

import {Component, OnInit} from '@angular/core'; import {Student} from "./Student"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'untitled1'; url = ""; name = ""; age = 0; position = 0; isCheck = true; tv=""; map = new Map(); ngOnInit(): void { this.map.set(0, new Student("张飞", 22, "http://img.558idc.com/uploadfile/allimg/java/b63857995c49409cb6478096e79af02e.jpg")); this.map.set(1, new Student("赵云", 18, "http://img.558idc.com/uploadfile/allimg/java/a1d8a546c2dd4be3b23d40968fd22a16.jpg")); this.map.set(2, new Student("刘备", 32, "http://img.558idc.com/uploadfile/allimg/java/7e6cd10bb1254c0a814dc36aa4a6ecf1.jpg")); this.getView(this.position); console.log(this.map) setInterval(() => this.trick(), 1500) if (this.isCheck){ this.tv = "暂停自动播放图片"; }else{ this.tv = "开启自动播放图片"; } this.map.forEach(function (value, key, map) { if (key==2){ console.log(map.get(key).name) } }) } getCheck(): void { /*点击 按钮 切换图片*/ this.position++; this.getView(this.position); console.log(this.url) } getView(position: number): void { this.url = this.map.get(position % 3).url this.name = this.map.get(position % 3).name this.age = this.map.get(position % 3).age } getStopView(): void { this.isCheck = !this.isCheck; if (this.isCheck){ this.tv = "暂停自动播放图片"; }else{ this.tv = "开启自动播放图片"; } } private trick() { this.position++; console.log(this.position) if (this.isCheck) { this.getView(this.position); } } }

step2:

export class Student { /* * 姓名 年龄 图片地址 * */ private _name: String = ""; private _age: number = 0; private _url: String = ""; constructor(name: String, age: number, url: String) { this._name = name; this._url = url; this._age = age; } get url(): String { return this._url; } set url(value: String) { this._url = value; } get name(): String { return this._name; } set name(value: String) { this._name = value; } get age(): number { return this._age; } set age(value: number) { this._age = value; } }

step3:

<div> <div> <img src="{{this.url}}"/> <div> <div> <div> <div style="display: flex"> <div>姓名：</div> <div>{{this.name}}</div> </div> <div style="display: flex"> <div>年龄：</div> <div>{{this.age}}</div> </div> <div style="display: flex"> <div (click)="getCheck()"> <div style="width: 80px;text-align: center;background-color: dodgerblue;color: white;outline: none">切换</div> </div> <div (click)="getStopView()"> <div style="width: 150px;margin-left: 120px;text-align: center;background-color: dodgerblue;color: white;outline: none">{{this.tv}}</div> </div> </div> </div> </div> </div> </div> </div>

end