<button (click)="onClick($event)">点我</button>

<input type="text" (input)="onInput($event)" value="">

<table>

  <tr>

    <td [attr.colspan]="colspan" class="a b" [class.c]="isBool"> 你好</td>

  </tr>

</table>

<table>

  <tr>

    <td [ngClass]="ngClassA"> 你好</td>

  </tr>

</table>

<table>

  <tr>

    <td [style.color]="isDev ? 'red': 'blue'"> 你好</td>

  </tr>

</table>

<table>

  <tr>

    <td [style.font-size.em]="isDev ? 3: 1"> 你好</td>

  </tr>

</table>

<table>

  <tr>

    <td [ngStyle]="ngStyleA"> 你好</td>

  </tr>

</table>

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-bind',

  templateUrl: './bind.component.html',

  styleUrls: ['./bind.component.css']

})

export class BindComponent implements OnInit {

  private colspan = ;

  private myclass: string;

  private isBool: boolean;

  private ngClassA;

  private isDev = false;

  private ngStyleA;

  constructor() { }

  ngOnInit() {

    this.ngClassA = {

      a: false,

      b: false,

      c: false

    };

    this.ngStyleA = {

      background: 'yellow',

      color: 'red'

    };

    setTimeout(() => {

      this.isBool = true;

      this.isDev = true;

      this.ngClassA = {

        a: true,

        b: true,

        c: true

      };

      this.ngStyleA = {

        background: 'red',

        color: 'yellow'

      };

    }, );

  }

  onClick($event) {

    console.log($event);

  }

  onInput($event) {

    console.log($event.target.value);

    console.log($event.target.getAttribute('value'));

  }

}

.a{

    background: yellow;

}

.b{

    color: red;

}

.c{

    font-size: 20px;

}