<p>head works!</p>
{{"08/09/2020 23:09:12"|date:'dd/MM/yy'}}
<div [style]="currentStyles">hello!!!!!!!!!!!!</div>
<div style=" 800px;height: 300px; display: flex;" >
<ng-container>
<div *ngFor="let item of dataList;let key=index" style=" 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=" 50px;height: 30px;" (click)="add()">+</button>
<button style=" 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--;
}
}
}
}