Angular实现gridview效果

news2024/11/22 16:41:36

说明:使用angular实现grid效果,支持文字图片多条数据展示
效果图:
在这里插入图片描述

step1:

<mat-grid-list cols="2" rowHeight="2:1">
  <mat-grid-tile *ngFor="let course of courses">{{ course }}</mat-grid-tile>
</mat-grid-list>

<mat-grid-list style="padding-top: 30px" cols="3" rowHeight="2:1">
  <mat-grid-tile *ngFor="let prodotu of prodotus">
    <mat-card>
      <mat-card-header>
        <mat-card-title>{{ prodotu.task }}</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <img ngSrc="{{prodotu?.icon}}" width="50" height="50" alt="">
      </mat-card-content>
      <p>{{ prodotu.description }}</p>
    </mat-card>
    <p></p>
  </mat-grid-tile>
</mat-grid-list>

step2:

mat-grid-tile {
  background: lightblue;
}

mat-card {
  background: red;
  width: 50%;
}

step3:

import {Component, OnInit} from '@angular/core';
import {MatGridListModule} from '@angular/material/grid-list';
import {
  MatCard,
  MatCardActions,
  MatCardContent,
  MatCardHeader,
  MatCardImage,
  MatCardTitle
} from '@angular/material/card';
import {MatDivider} from '@angular/material/divider';
import {MatButton} from '@angular/material/button';
import {MatTooltip} from '@angular/material/tooltip';
import {NgForOf, NgOptimizedImage} from '@angular/common';


@Component({
  selector: 'app-home',
  standalone: true,
  imports: [MatGridListModule, MatCard, MatCardHeader, MatCardContent, MatCard, MatCardTitle, MatCardContent, MatDivider, MatCardActions, MatButton, MatTooltip, NgForOf, MatCardImage, NgOptimizedImage],
  templateUrl: './home.component.html',
  styleUrl: './home.component.css'
})
export class HomeComponent implements OnInit{
  todos: Todo[] = [];
  dialogData: Todo = {task: '', description: '', icon: ''};
  courses:number[]=[1,2,3,4,5,6,7,8,9,10,11,12]


  prodotus :Todo[]=[]

  ngOnInit(): void {
    this.prodotus[0] = {task: '101', description: '火箭少女',icon: 'http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg'};
    this.prodotus[1] = {task: '102', description: '黄金木乃伊',icon: 'http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg'};
    this.prodotus[2] = {task: '103', description: '螳螂',icon: 'http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg'};
    this.prodotus[3] = {task: '104', description: '雪山精英',icon: 'http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg'};
    this.prodotus[4] = {task: '105', description: '特战先锋',icon: 'http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg'};


    console.log(this.prodotus)
    console.log(this.courses)
    console.log(this.todos)
    console.log(this.dialogData)
  }

  goToRole(name:string){
    console.log(name)
  }
}


interface Todo {
  icon:string;
  task: string;
  description: string;
}


end

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2230216.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

web of sicence使用教程(研究生版)

学习视频链接 进入web of science 通过校园资料库进入进入&#xff0c;选择如下 核心检索规则 不区分字母大小写逻辑运算符 可以通过括号改变优先级 常用通配符 短语检索 检索界面 检索类型 选择数据库

2-8软件包管理

8.1 配置仓库 1.配置本地仓库 #进行代码安装前需要先进行仓库配置和挂载 [rootlocalhost ~]# cd /etc/yum.repos.d [rootlocalhost yum.repos.d]# vim base.repo [baseos] namebaseos baseurl/mnt/BaseOS gpgcheck0 [appstream] nameappstream baseurl/mnt/AppStream gp…

适配器模式:类适配器与对象适配器

适配器模式是一种结构性设计模式&#xff0c;旨在将一个接口转换成客户端所期望的另一种接口。它通常用于解决由于接口不兼容而导致的类之间的通信问题。适配器模式主要有两种实现方式&#xff1a;类适配器和对象适配器。下面&#xff0c;我们将详细探讨这两种方式的优缺点及适…

性能测试:性能测试流程与方法

性能测试流程是指在进行性能测试时所遵循的一系列步骤和阶段&#xff0c;以确保对系统的全面测试和评估。性能测试流程的具体步骤可能会因组织、项目和测试需求而有所不同。 性能测试流程 分析现状&#xff1a;首先需要对应用程序或系统进行详细的分析&#xff0c;了解其当前的…

使用WebStorm开发Vue3项目

记录一下使用WebStorm开发Vu3项目时的配置 现在WebStorm可以个人免费使用啦&#xff01;&#x1f929; 基本配置 打包工具&#xff1a;Vite 前端框架&#xff1a;ElementPlus 开发语言&#xff1a;Vue3、TypeScript、Sass 代码检查&#xff1a;ESLint、Prettier IDE&#xf…

Java已死,大模型才是未来?

作者&#xff1a;不惑_ 引言 在数字技术的浪潮中&#xff0c;编程语言始终扮演着至关重要的角色。Java&#xff0c;自1995年诞生以来&#xff0c;便以其跨平台的特性和丰富的生态系统&#xff0c;成为了全球范围内开发者们最为青睐的编程语言之一 然而&#xff0c;随着技术的…

Allegro: 开源的高级视频生成模型

我们很高兴地宣布 Allegro 的开源发布&#xff0c;这是 Rhymes AI 先进的文本到视频模型。Allegro 是一款功能强大的人工智能工具&#xff0c;能将简单的文字提示转化为高质量的视频短片&#xff0c;为人工智能生成视频领域的创作者、开发者和研究人员开辟了新的可能性。我们希…

【OD-支持在线评测】智能驾驶(200分)

📎 在线评测链接 https://app5938.acapp.acwing.com.cn/contest/11/problem/OD1073 🍓 OJ题目截图 🍿 最新机试E卷,全、新、准,题目覆盖率达 95% 以上,支持题目在线评测,专栏文章质量平均 94 分 🌍 评测功能需要 ⇒ 订阅专栏 ⇐ 后私信联系解锁~ 文章目录 📎…

SpringBoot【实用篇】- 配置高级

文章目录 目标&#xff1a;1.ConfigurationProperties2.宽松绑定/松散绑定3. 常用计量单位绑定4.数据校验 目标&#xff1a; ConfigurationProperties宽松绑定/松散绑定常用计量单位绑定数据校验 1.ConfigurationProperties ConfigurationProperties 在学习yml的时候我们了解…

构造小练习

一。 二。 构造函数的调用顺序&#xff1a; 先走全局&#xff0c;再main函数&#xff0c;而局部静态的函数是走到它那里才开始初始化。所以先构造C&#xff0c;再A,B&#xff0c;最后D。 析构函数的顺序&#xff1a; 先析构局部的&#xff0c;再析构全局的。后定义的先析构。…

openapi回调地址请求不通过

目录 1. 验证url接口get请求本地自测报错 2. 测试回调模式成功不返回结果 3. 测试回调模式返回结果带双引号 对接企业微信 产生会话回调事件 接口问题解决 1. 验证url接口get请求本地自测报错 java.lang.IllegalArgumentException: Last encoded character (before the pa…

探索Unity:从游戏引擎到元宇宙体验,聚焦内容创作

unity是实时3D互动内容创作和运营平台&#xff0c;包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者&#xff0c;借助Unity将创意变成现实。提供一整套完善的软件解决方案&#xff0c;可用于创作、运营和变现任何实时互动的2D和3D内容&#xff0c;支持平台包括手机、…

数据结构与算法实验练习(三)(排序及线性表的应用)

数据结构与算法分析课下实验练习&#xff0c;现记录一下解答过程&#xff0c;欢迎大家批评指正。 声明&#xff1a;本题目来源于西安交通大学电信学院原盛老师&#xff0c;任何单位或个人在使用、转载或引用本题目时&#xff0c;请务必标明出处为“西安交通大学电信学院原盛老…

mac|安装redis及RedisDesk可视化软件

一、安装 通过Homebrew安装 brew install redis 在安装过程可以得到以下信息&#xff1a; 1、启动redis或重新登陆redis brew services start redis 如果只想在前端运行&#xff0c;而不是在后端&#xff0c;则使用以下命令 /opt/homebrew/opt/redis/bin/redis-server /opt…

基于hive分析Flask为后端框架echarts为前端框架的招聘网站可视化大屏项目

基于hive分析Flask为后端框架echarts为前端框架的招聘网站可视化大屏项目 1. 项目概述 项目目标是构建一个大数据分析系统&#xff0c;包含以下核心模块&#xff1a; 1、数据爬取&#xff1a;通过request请求获取猎聘网的就业数据。 2、数据存储和分析&#xff1a;使用 Hive …

Rust 力扣 - 2841. 几乎唯一子数组的最大和

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们遍历长度为k的窗口&#xff0c;用一个哈希表记录窗口内的所有元素&#xff08;用来对窗口内元素去重&#xff09;&#xff0c;我们取哈希表中元素数量大于等于m的窗口总和的最大值 题解代码 use std::coll…

Blender进阶:贴图与UV

9 UV 9.1 贴图与UV UV&#xff0c;指定每个面顶点在贴图上的坐标 演示&#xff1a; 1、添加物体 2、添加贴图&#xff0c;即图片纹理节点 3、进入UV Edit工作区 4、右边&#xff0c;选择一个面 5、左边&#xff0c;选择一个面&#xff0c;移动这个面 9.2 电子表格 电子…

UiPath调用Python脚本的完整示例

一、主要步骤&#xff1a; 1、创建Python脚本 2、安装UiPath.Python.Activities库 3、使用方法&#xff1a; a、添加python作用域 b、加载python脚本 c、调用python方法 d、获取python对象 e、显示Python结果的消息对话框 二、详细步骤 1、安装UiPath.Python.Activities库 …

[pdf,epub]105页《分析模式》漫谈合集01

105页的《分析模式》漫谈合集第1集的pdf、epub文件&#xff0c;已上传到本账号的CSDN资源。 如果无法下载&#xff0c;也可以访问umlchina.com/url/ap.html 已排版成适合手机阅读&#xff0c;pdf的排版更好一些。 ★UMLChina为什么叒要翻译《分析模式》&#xff1f; ★[缝合故…

科技资讯|谷歌Play应用商店有望支持 XR 头显,AR / VR设备有望得到发展

据 Android Authority 报道&#xff0c;谷歌似乎正在为其 Play 商店增加对 XR 头显的支持。该媒体在 Play 商店的代码中发现了相关的线索&#xff0c;包括一个代表头显的小图标以及对“XR 头显”的提及。 谷歌也可能改变了此前拒绝将 Play 商店引入 Meta Quest 头显的决定。今…