angular数据双向绑定获取value值

先在app.module.ts文件引入

import { FormsModule } from '@angular/forms';

imports: [
    FormsModule
  ],

在组件header
ts文件夹

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
   public title:any={
     name:'',
     sex:'2',
     cityList:['北京','上海','广州','深圳'],
     city:'北京',
     hobby:[
       {
        txt:'吃饭',
        checked:false
       },
       {
        txt:'睡觉',
        checked:false
       },
       {
        txt:'敲代码',
        checked:true
       },
    ],
    mark:''
   }
  constructor() { }

  ngOnInit() {
  }
  doheader(){
    // let usernameDom:any= document.getElementById('username');
    // console.log(usernameDom.value)

    console.log(this.title)
  }

}

html文件

<h3>我是header页面</h3>


<div id="btn">
        <input type="text" [(ngModel)]="title.name" id="username" value=""><br>
        <input type="radio" value="1" id="sex1" name="sex" [(ngModel)]="title.sex"/><label for="sex1">男</label>
        <input type="radio" value="2" id="sex2" name="sex" [(ngModel)]="title.sex"/><label for="sex2">女</label>
        <br>
        <select name="city" id="city" [(ngModel)]="title.city">
            <option [value]="item" *ngFor="let item of title.cityList">{{item}}</option>
        </select>
        <br>
        爱好：
        <span *ngFor="let item of title.hobby;let key=index;">
                <input type="checkbox" [id]="'check'+key" [(ngModel)]="item.checked"><label for="'check'+key">{{item.txt}}</label>
        </span>
        <br>
        备注：
        <textarea name="mark" id="mark" cols="30" rows="10" [(ngModel)]="title.mark">

        </textarea>
        <br>
        <p> {{title | json}}</p>
</div>

<button (click)="doheader()">获取内容</button>