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

相关推荐
FuckPatience32 分钟前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
一枚前端小能手1 小时前
🔥 SSR服务端渲染实战技巧 - 从零到一构建高性能全栈应用
前端·javascript
Komorebi_99991 小时前
Vue3 provide/inject 详细组件关系说明
前端·javascript·vue.js
不一样的少年_1 小时前
【前端效率工具】:告别右键另存,不到 50 行代码一键批量下载网页图片
前端·javascript·浏览器
Asort1 小时前
JavaScript设计模式(八):组合模式(Composite)——构建灵活可扩展的树形对象结构
前端·javascript·设计模式
木觞清1 小时前
喜马拉雅音频链接逆向实战
开发语言·前端·javascript
一枚前端小能手2 小时前
「周更第6期」实用JS库推荐:InversifyJS
前端·javascript
叉歪2 小时前
纯前端函数,一个拖拽移动、调整大小、旋转、缩放的工具库
javascript
Hilaku2 小时前
"事件委托"这个老古董,在现代React/Vue里还有用武之地吗?
前端·javascript·vue.js
向葭奔赴♡2 小时前
前端框架学习指南:提升开发效率
前端·javascript·vue.js