说明:用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,) => {
this.messages[key] = value
})
console.log(this.messages)
console.log(this.map)
}
}
step2:
<div>
<h1>纵横小说网</h1>
<div style="display: flex;padding: 10px;" *ngFor="let message of this.messages;index as i;">
<img style="width: 250px;height:" src="{{message._image}}"/>
<div style="margin-left: 10px;">
<div style="font-size:"> {{message._title}}
</div>
<div style="display: flex;color:">
<div style="width: 50px;text-align:">
{{message._author}}
</div>
<div style="margin-left: 2px;width: 50px;text-align:">
{{message._style}}
</div>
<div style="margin-left: 2px;width: 50px;text-align:">
{{message._status}}
</div>
</div>
<div style="height:">{{message._detail}}</div>
<div style="display: flex;color:">
<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:) {
this._image = value;
}
get title(): String {
return this._title;
}
set title(value:) {
this._title = value;
}
get author(): String {
return this._author;
}
set author(value:) {
this._author = value;
}
get style(): String {
return this._style;
}
set style(value:) {
this._style = value;
}
get status(): String {
return this._status;
}
set status(value:) {
this._status = value;
}
get detail(): String {
return this._detail;
}
set detail(value:) {
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:) {
this._time = value;
}
get hot(): String {
return this._hot;
}
set hot(value:) {
this._hot = value;
}
get id(): number {
return this._id;
}
set id(value:) {
this._id = value;
}
constructor(_id: number, _image: String, _title: String, _author: String, _style: String, _status: String, _detail: String, _new: String, _time: String, _hot:) {
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 = "";
}