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