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

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

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

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://gov-/xinwen/2022-06/26/5697838/images/b63857995c49409cb6478096e79af02e.jpg" , "神级富豪", "了无忧", "都市" , "连载", "拜金女友让我父母睡大街？一怒拒绝，却意外绑定人生巅峰系统。恭喜宿主获得一个亿。恭喜宿主获得两亿豪车兰博基尼爵逸铭风一辆。恭喜宿主成为百亿市值公司董事长。走上了人生巅峰的陆逸，默默感叹：我不喜欢钱，我对钱真的没兴趣了。", "第51章 神秘电话", "08-12 07：02", "76942" )); this.map.set(1, new Student(1,"http://gov-/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:

纵横小说网

{{message._title}}

{{message._author}}

{{message._style}}

{{message._status}}

{{message._detail}}

最近更新：{{message._new}}

更新时间：{{message._time}}

{{message._hot}}热度

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 = ""; }

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。