angular ts 创建对象

创建ts实例

export class User {
  id: number;
  name: string;

  constructor(
    id: number,
    name: string) {
    this.id = id;
    this.name = name;
  }

  getUser(): Array<User> {
    const list = new Array<User>();
    for (let i = 0; i < 20; i++) {
      // console.log('----:' + i);
      list.push(new User(i, 'ssss:' + i));

    }
    console.log('----遍历开始:' + list.length);

    for (const usersKey of list) {
      console.log('----xxx:' + usersKey.id + '---:' + usersKey.name);
    }
    console.log('----遍历结束:' + list.length);
    return list;
  }
}

 

Angular 通过TypeScript (TS) 修改CSS样式通常涉及使用模板(template)、CSS类绑定(class binding)以及指令(directives)。当你需要根据组件的状态或数据动态改变元素的样式时,可以这样做: 1. **模板(HTML)**:在HTML模板中,你可以将CSS类名绑定到属性上,例如 `[ngClass]` 或 `[class.]`,这允许你在JavaScript表达式中设置类名。 ```html <div [ngClass]="{'active': isActive}">...</div> ``` 这里,`isActive` 是一个 TypeScript 变量,当其值为真时,`active` 类会被应用到元素上。 2. **CSS Class Bindings**:在TypeScript中,你可以创建并更新这些绑定的条件。例如,如果你有一个 `isActive` 的布尔变量,你可以像下面这样处理: ```typescript @Component({ selector: 'my-component', template: ` <div [ngClass]="{'active': isActive}"> Content </div> `, }) export class MyComponent { isActive = false; // 这里可以根据业务逻辑改变这个值 } ``` 3. **内联样式(Inline Styles)**:如果你想直接改变元素的样式,可以在模板里使用双大括号 `{{}}` 表达式: ```html <div style="color: {{getColor()}};">Text</div> ``` 然后在 TypeScript 中定义 `getColor()` 函数返回相应的颜色。 4. **Angular 指令**:如果需要更复杂的行为,可以自定义指令,如 `NgStyle`,它允许你动态设置行内样式: ```typescript @Component({ selector: 'app-style-directive', template: `<div [ngStyle]="styleObject"></div>`, }) export class StyleDirective { @Input('style') styleObject: { [key: string]: string }; } ``` 在这个例子中,你可以传递一个对象给 `styleObject`,它的键是 CSS 属性,值是对应的值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值