angular数据双向绑定获取value值

柔情只为你懂 2023-08-17 16:50 137阅读 0赞

先在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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20230809/6308ff27716d4d48b5e6db81e4ca5521.png