【Angular 学习】第三天：数据、事件、属性的使用

一、数据

test.component.ts

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

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

  //定义简单数据
  name = 'Dai';
  //定义复杂数据
  person = {
    
    
    name: '@Dai'
  }
  constructor() {
    
     }

  ngOnInit(): void {
    
    
  }

}

test.component.html

<!-- 简单类型 -->
<p>简单类型：{
   
   {name}} 加油</p>

<!-- 复杂类型 -->
<p>复杂类型：{
   
   {person.name}}</p>

<!-- 数学运算 -->
<p>数学运算：{
   
   {name + ' 加油呀'}}</p>

<!-- 比较运算 -->
<p>比较运算：{
   
   {name==='Dai'}}</p>
<p>三元运算：{
   
   {name==='Dai'? '正确' : '错误'}}</p>

<!-- 逻辑运算 -->
<p>逻辑运算：{
   
   {name&&person.name}}</p>

<!-- js方法 -->
<p>js方法：{
   
   {name.toUpperCase()}}</p>

效果

二、事件

()表示监听事件

test.component.ts

  //点击事件
  click() {
    
    
    console.log('点击了')
  }

test.component.html

<!-- 点击事件 -->
<p><button (click)="click()">点击</button></p>

三、属性

[]表示绑定属性

test.component.ts

name = 'Dai';

1、数据绑定

<p><input type="button" [value]="name"></p>

效果

2、数据双向绑定

test.component.html

<!-- 数据双向绑定 [()]-->
<p><input type="text" [(ngModel)]="name"></p>

效果

以上报错的原因在于还没有引入相应的模块。

解决方案：

1、在app.module.ts文件中引入FormsModule模块：import { FormsModule } from '@angular/forms';
2、然后在imports中添加FormsModule。

问题解决！！

以上就是数据、事件和属性的知识，大家请关注《Angular 学习》专栏。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享，一起进步，加油。