SOURCE

console 命令行工具 X clear

                    
>
console
import { Component, OnInit, ElementRef, AfterViewInit  } from '@angular/core';
import { DATA } from '../mock-data';
import { Data } from '../data'

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {
  arr = DATA;
  c1;
  //addData: Data = {
  //  title: 'Rack-',
  //  address_a: 'a',
  //  address_b: 'aaa',
  //  num: Math.floor(Math.random()*7+1)
  //}

  constructor(private elementRef: ElementRef) { }

  ngOnInit() {
  }

  add () {
    this.arr.push({
      title: 'Rack-',
      address_a: 'a',
      address_b: 'aaa',
      num: Math.floor(Math.random()*7+1)
    })
  }
  delete (i) {
    this.arr.splice(i,1)
  }
  //ngAfterViewInit () {
  //  console.log(this.elementRef.nativeElement.querySelector('.te').innerHTML);
  //  this.c1 = this.elementRef.nativeElement.querySelector('.te').innerHTML
  //}
}

//下面是mock-data
import { Data } from './data';

export const DATA:Data[] = [
  {
    title: 'Rack-',
    address_a: 'a',
    address_b: 'aaa',
    num: Math.floor(Math.random()*7+1)
  },
  {
    title: 'Rack-',
    address_a: 'b',
    address_b: 'bbb',
    num: Math.floor(Math.random()*7+1)
  },
  {
    title: 'Rack-',
    address_a: 'c',
    address_b: 'ccc',
    num: Math.floor(Math.random()*7+1)
  },
  {
    title: 'Rack-',
    address_a: 'd',
    address_b: 'ddd',
    num: Math.floor(Math.random()*7+1)
  },
  {
    title: 'Rack-',
    address_a: 'e',
    address_b: 'eee',
    num: Math.floor(Math.random()*7+1)
  },
  {
    title: 'Rack-',
    address_a: 'f',
    address_b: 'fff',
    num: Math.floor(Math.random()*7+1)
  },
  {
    title: 'Rack-',
    address_a: 'g',
    address_b: 'ggg',
    num: Math.floor(Math.random()*7+1)
  }
]
<div class="container">
  <ul>
    <li *ngFor="let content of arr;index as i">
      <div class="title">{{content.title}}{{i+1}}<i (click)="delete(i)"></i></div>
      <div class="circle">
        <span class="span">
          <span [class.active]="content.num > 0">1</span>
          <span [class.active]="content.num-1 > 0">2</span>
          <span [class.active]="content.num-2 > 0">3</span>
          <span [class.active]="content.num-3 > 0">4</span>
          <span [class.active]="content.num-4 > 0">5</span>
          <span [class.active]="content.num-5 > 0">6</span>
          <span [class.active]="content.num-6 > 0">7</span>

          <!--<span class="active" *ngIf="content.num > 0 ">1</span>-->
          <!--<span class="active" *ngIf="content.num-1 > 0 ">2</span>-->
          <!--<span class="active" *ngIf="content.num-2 > 0 ">3</span>-->
          <!--<span class="active" *ngIf="content.num-3 > 0 ">4</span>-->
          <!--<span class="active" *ngIf="content.num-4 > 0 ">5</span>-->
          <!--<span class="active" *ngIf="content.num-5 > 0 ">6</span>-->
          <!--<span class="active" *ngIf="content.num-6 > 0 ">7</span>-->
        </span>
        <span class="te">{{ content.num }}</span>
      </div>
      <div class="address">
        <span>{{ content.address_a }}</span>
        <span>{{ content.address_b }}</span>
      </div>
    </li>
    <li class="te" (click)="add()"></li>
  </ul>
</div>
.container {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
  ul {
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    li {
      border-radius: 3px;
      position: relative;
      list-style: none;
      cursor: pointer;
      width: 22%;
      margin: 15px;
      border: 1px solid #ccc;
      top: 0;
      box-shadow: 0 0;
      transition: top .2s 0s linear;
      &:hover {
        box-shadow: 0px 0px 2px #ccc;
        top: -5px;
      }
      div {
        border-bottom: 1px solid #ccc;
        &.title {
          position: relative;
          text-align: center;
          height: 42px;
          line-height: 42px;
          font-size: 20px;
          font-weight: 700;
          i {
            position: absolute;
            left: 240px;
            top: 11px;
            background: #ff8080;
            width: 20px;
            height: 20px;
            border-radius: 50%;
          }
          i:after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 8px;
            border: 1px solid #fff;
            margin-left: -4.8px;
          }
        }
        &.circle {
          font-size: 14px;
          line-height: 14px;
          color: #666;
          padding: 15px 25px;
          .span {
            span {
              padding: 1px 4px;
              font-size: 10px;
              border-radius: 50%;
              margin-right: 10px;
              background-color: #ddd;
              &.active {
                background-color: deepskyblue;
              }
            }
          }
          .te {
            margin-left: 20px;
          }
        }
        &.address {
          box-sizing: border-box;
          padding: 0 10px;
          display: flex;
          justify-content: space-between;
          border-bottom: 0;
          height: 36px;
          line-height: 36px;
          font-size: 12px;
          color: #999;
        }
      }
    }
    li.te {
      height: 129px;
      border: 1px solid #ccc;
      &:hover {
        top: 0;
        box-shadow: 0 0;
      }
    }
    li.te:before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 50px;
      border: 3px solid green;
      margin-left: -25px;
    }
    li.te:after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      height: 50px;
      border: 3px solid green;
      margin-top: -25px;
    }
  }
}