angular和for循环实现listview列表

最新推荐文章于 2024-05-20 14:52:21 发布

勘察加熊人

最新推荐文章于 2024-05-20 14:52:21 发布

阅读量597

点赞数

分类专栏： typescript 文章标签： angular.js javascript 前端

本文链接：https://blog.csdn.net/cf8833/article/details/126309556

版权

本文介绍如何利用Angular.js和for循环在前端构建一个ListView列表。通过详细步骤，包括设置icon，逐步指导完成列表的实现。

摘要由CSDN通过智能技术生成

说明：用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)
  }