angular2复选框及其按钮

<p>head works!</p>

{{"08/09/2020 23:09:12"|date:'dd/MM/yy'}}

<div [style]="currentStyles">hello!!!!!!!!!!!!</div>

<div style="width: 800px;height: 300px; display: flex;" >

  <ng-container>

  <div  *ngFor="let item of dataList;let key=index" style="width: 100px;height: 50px;border:solid 1px black" [ngClass]="{'bgColor':key==bf}" (click)="testItem(item,key)">{{item.name}}

    <button (click)="delete(key)" >-</button>

  </div>

</ng-container>

</div>

<input type="text"[(ngModel)]="data.name">

<input type="text" [(ngModel)]="data.pNumber">

<label for="man">男</label><input id="man" type="radio" name="sex" [(ngModel)]="data.sex" [value]="man"/>

<label for="femal">女</label><input id="femal" type="radio" name="sex" [(ngModel)]="data.sex" [value]="femal"/>

<ng-container *ngFor="let item of data.hobby;let i=index">

  <label for="i">{{item.title}}</label><input type="checkbox" id="i" [(ngModel)]="item.checked">

</ng-container>

<select [(ngModel)]="data.city">

<option *ngFor="let item of cityList" [value]="item">{{item}}</option>

</select>

<button style="width: 50px;height: 30px;" (click)="add()">+</button>

<button  style="width: 50px;height: 30px;" (click)="ok()">ok</button>

 

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

import { Test } from 'src/app/test';

@Component({

  selector: 'app-head',

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

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

})

export class HeadComponent implements OnInit {

  dataList: Array<Test> = new Array(new Test);

  data: Test = new Test();

  red = "red";

  blue = "blue";

  fs = "100px";

  f = "20px";

  flag = false;

  man = "man";

  femal = "femal";

  bf: number;

  city: string = "天津";

  cityList: Array<string> = ["北京", "天津", "上海", "重庆"];

  currentStyles = { 'color': this.flag ? this.red : 'blue', 'font-size': false ? this.fs : this.f };

  constructor() { }

  ngOnInit() {

    this.data.hobby=[{title:'跑步',checked:false},{title:'游泳',checked:true},{title:'乒乓',checked:false}];

  }

  add() {

    if (this.dataList.length < 4) {

      this.dataList.push(new Test());

    }

  }

  testItem(item: Test, key: number) {

    this.data = item;

    this.data.hobby=[{title:'跑步',checked:false},{title:'游泳',checked:true},{title:'乒乓',checked:false}]

    this.bf = key;

  }

  ok() {

    console.log(this.dataList);

    if(this.dataList.length==1){

      this.dataList.pop();

      this.dataList.push(this.data);

    }

  }

  delete(index: number) {

    this.data=new Test

    if (this.dataList.length > 1) {

      this.dataList.splice(index, 1);

      if (this.bf >= this.dataList.length) {

        this.bf--;

      }

    }

    

  }

}