前端学习（2327）：angular之双向绑定

test1.component.html

<p class="p1">test1 works!</p>
<div (click)="clickDemo()" >我是div1的内容</div>
<input (keyup)="onkey($event)"  type="text">

<form action="" #heroFrom="ngForm">
  <input type="text" name="userName" [(ngModel)]="user.userName">

</form>
<div>{{user.userName}}</div>

test1.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { Test1Component } from './test1.component';

describe('Test1Component', () => {
  let component: Test1Component;
  let fixture: ComponentFixture<Test1Component>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ Test1Component ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(Test1Component);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

test1.component.ts

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

@Component({
  selector: 'app-test1',
  templateUrl: './test1.component.html',
  styleUrls: ['./test1.component.css']
})
export class Test1Component implements OnInit {

  constructor() {
    // 先出现

  }
user: {

};
  ngOnInit(): void {

    this.user = {
      userName: ''
    };
  }
  clickDemo(){
    console.log('1111');
  }
  onkey($event: any){
    this.values = event.target.value;
  }
}

运行结果