0
点赞
收藏
分享

微信扫一扫

angular和for循环实现listview列表


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

icon:

angular和for循环实现listview列表_javascript

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


举报

相关推荐

0 条评论