Angular学习笔记(二)（[ngClass]、[ngStyle]）

野性酷女 2023-02-20 02:56 24阅读 0赞

在angular中可以通过 \[ngClass\]、\[ngStyle\]动态的设定模板元素的样式

ts文件：

import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.css']
    })
    export class HomeComponent implements OnInit {
    
      heros = ['第一个测试', '第二个测试', '第三个测试'];
    
      attr = 'blue';
      constructor() { }
    
      ngOnInit() {
      }
    
    }

html文件

<ul *ngFor="let hero of heros;let key = index;" [ngClass]="{'blue':key==0,'red':key==1,'orange':key==2}">
    
      <li >{
       {key}}----{
       {hero}}</li>
    
    </ul>
    <div [ngStyle]="{'color':'red'}">
      我是ngStyle
    </div>
    
    <p [ngStyle]="{'color':attr}">这里使用了定义的attr</p>

css文件

.blue{
      color: blue;
    }
    .red{
      color: red;
    }
    
    .orange{
      color: orange;
    }

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5ajEwODMxNw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5ajEwODMxNw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200622174634449.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5ajEwODMxNw==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，24人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular学习笔记

带有双花括号的插值表达式 (interpolation) 来显示一个组件属性。用 ngFor 显示数组。用一个 TypeScript 类来为你的组件描述模

亦凉/ 2024年02月19日 12:23/ 0 赞/ 117 阅读

相关 Angular6 学习笔记——指令

angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: [https://www.angular.cn/guide/template-syntax][htt

偏执的太偏执、/ 2023年05月30日 15:58/ 0 赞/ 54 阅读

相关 Angular学习笔记(二)（[ngClass]、[ngStyle]）

在angular中可以通过 \[ngClass\]、\[ngStyle\]动态的设定模板元素的样式 ts文件： import { Component, OnInit

野性酷女/ 2023年02月20日 02:56/ 0 赞/ 25 阅读

相关 Angular学习笔记

控制器 <table> <thead> <tr> <th>Controller</th> <th></th> </tr> </thea

素颜马尾好姑娘i/ 2022年07月24日 10:26/ 0 赞/ 239 阅读

相关 Angular系列学习笔记（二）—— 基于gulp构建Angular单页面应用

前言构建打包工具之前一直是使用 webpack（歪脖帕克，毕竟尤大推荐的工具），由于公司这边是使用gulp，为了和公司同步，私下还是要学习学习，毕竟懂点万一需要和老大交

梦里梦外;/ 2022年05月20日 03:45/ 0 赞/ 332 阅读

相关 Angular学习心得（二）

ng-repeat 遍历数组或json： 1、ng-repeat=‘’item in arr‘’遍历循环输出(导入Angular.js包，设置ng-

╰+攻爆jí腚メ/ 2022年05月12日 02:40/ 0 赞/ 232 阅读

相关 angular.js学习手册（二）

如何使用angularjs？各个 angular.js 版本下载： [https://github.com/angular/angular.js/releases][htt

梦里梦外;/ 2022年01月07日 07:41/ 0 赞/ 282 阅读

相关 Angular学习笔记－

１．　angular添加input ，做双向绑定时遇到： ![70][] 解决措施: 在　app.module.ts　里面添加： import { F

亦凉/ 2021年10月09日 04:22/ 0 赞/ 379 阅读

相关 Angular 学习（二）：Angular 简介

文章目录一、 Angular 介绍 AngularJS 特性

怼烎@/ 2021年09月29日 01:44/ 0 赞/ 756 阅读

相关 Angular学习(二)【组件】

组件前端中的组件是一堆为了实现同一业务逻辑的代码文件的组合，将相关文件都放到同一个目录中，就形成了一个独立性非常强的组件。 Angular 中使用了Web Compo

系统管理员/ 2021年06月26日 16:06/ 0 赞/ 560 阅读