angular使用for循环实现纵横列表

说明：用div+ts实现一个listview的列表

icon：

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 { map = new Map(); messages = new Array() ngOnInit(): void { this.map.set(0, new Student(0,"http://www.gov.cn/xinwen/2022-06/26/5697838/images/b63857995c49409cb6478096e79af02e.jpg" , "神级富豪", "了无忧", "都市" , "连载", "拜金女友让我父母睡大街？一怒拒绝，却意外绑定人生巅峰系统。恭喜宿主获得一个亿。恭喜宿主获得两亿豪车兰博基尼爵逸铭风一辆。恭喜宿主成为百亿市值公司董事长。走上了人生巅峰的陆逸，默默感叹：我不喜欢钱，我对钱真的没兴趣了。", "第51章 神秘电话", "08-12 07：02", "76942" )); this.map.set(1, new Student(1,"http://www.gov.cn/xinwen/2022-06/26/5697838/images/60e5bbc1a8ab4bdbab699e56ecc490ce.jpg" , "我的极品朋友", "锦猪", "言情" , "完结", "农家小子闯入红尘以后，将会有何作为？遇木则兴，遇水则争，遇强则屈，遇土则活，成大器者，必经重重磨难。何意？何解？", "第155章 龙王殿下", "08-12 07：25", "82942" )); this.map.forEach((value, key, map) => { this.messages[key] = value }) console.log(this.messages) console.log(this.map) } }

step2:

<div> 纵横小说网 <div style="display: flex;padding: 10px;" *ngFor="let message of this.messages;index as i;"> <img style="width: 250px;height: 170px" src="{{message._image}}"/> <div style="margin-left: 10px;"> <div style="font-size: 25px"> {{message._title}} </div> <div style="display: flex;color: gray"> <div style="width: 50px;text-align: center"> {{message._author}} </div> <div style="margin-left: 2px;width: 50px;text-align: center"> {{message._style}} </div> <div style="margin-left: 2px;width: 50px;text-align: center"> {{message._status}} </div> </div> <div style="height: 50%">{{message._detail}}</div> <div style="display: flex;color: gray"> <div style="width: 42%;"> 最近更新：{{message._new}} </div> <div style="margin-left: 2px;width: 40%;"> 更新时间：{{message._time}} </div> <div style="margin-left: 2px;width: 18%;"> {{message._hot}}热度 </div> </div> </div> </div> </div>

step3:

export class Student { /* image title author style status detail new time hot * */ get image(): String { return this._image; } set image(value: String) { this._image = value; } get title(): String { return this._title; } set title(value: String) { this._title = value; } get author(): String { return this._author; } set author(value: String) { this._author = value; } get style(): String { return this._style; } set style(value: String) { this._style = value; } get status(): String { return this._status; } set status(value: String) { this._status = value; } get detail(): String { return this._detail; } set detail(value: String) { this._detail = value; } get new(): String { return this._new; } set new(value: String) { this._new = value; } get time(): String { return this._time; } set time(value: String) { this._time = value; } get hot(): String { return this._hot; } set hot(value: String) { this._hot = value; } get id(): number { return this._id; } set id(value: number) { this._id = value; } constructor(_id: number, _image: String, _title: String, _author: String, _style: String, _status: String, _detail: String, _new: String, _time: String, _hot: String) { this._hot = _hot; this._id = _id; this._image = _image; this._title = _title; this._author = _author; this._style = _style; this._status = _status; this._detail = _detail; this._new = _new; this._time = _time; } private _id: number = 0; private _image: String = ""; private _title: String = ""; private _author: String = ""; private _style: String = ""; private _status: String = ""; private _detail: String = ""; private _new: String = ""; private _time: String = ""; private _hot: String = ""; }