Angular实现gridview效果

说明:使用angular实现grid效果,支持文字图片多条数据展示

效果图:

step1:

xml 复制代码
<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:

css 复制代码
mat-grid-tile {
  background: lightblue;
}

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

step3:

javascript 复制代码
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

相关推荐
晓13132 小时前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
海底火旺2 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
前端付豪2 小时前
15、前端可配置化系统设计:从硬编码到可视化配置
前端·javascript·架构
aPurpleBerry2 小时前
hot100 hot75 栈、队列题目思路
javascript·算法
颜漠笑年3 小时前
可迭代对象≠数组,一起来揭开for...of背后隐藏的秘密吧
前端·javascript
脑袋大大的4 小时前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君014 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
江城开朗的豌豆6 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆6 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆6 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js