Angular 学习日记 - 5 - 数据绑定

Angular 的数据绑定

1、字符串插值（String Interpolation）

{{ data }}

无论花括号中填了什么，最后必须以某种方式返回一个字符串，或者很容易转换成字符串的东西，比如数字之类的。

用例：可以在花括号中间调用一个方法，然后返回一个字符串。

还有一个限制是不能写多行表达式，所以不能用if或者for结构等等，但是可以用三元表达式。 

export class StringInterpolationComponent implements OnInit {
  name: string = 'Tom';
  age: number = 10;

  getFavoriteFoods() {
    return ['apple', 'banana'];
  }

  constructor() {}

  ngOnInit(): void {}
}

<p>{{ "My name" }} is {{ name }}.</p>
<p>I am {{ age }} years old.</p>
<p>My favorite foods are {{ getFavoriteFoods() }}</p>

 

 2、属性绑定（Property Binding）

[property]="data"

可以动态绑定一些HTML属性。

export class PropertyBindingComponent implements OnInit {
  allowNewRow:boolean = true;

  constructor() { setTimeout(() => {
    this.allowNewRow = false;
  }, 2000); }

  ngOnInit(): void {
  }

}

<button class="btn btn-primary" [disabled]="allowNewRow">Add a Row</button>

可以简单使用字符串绑定替换插值

<p>{{ allowNewRow }}</p>
<p [innerText]="allowNewRow"></p>

 

3、事件绑定（Property Binding）

(event)="function()"

在括号内添加所绑定的方法。

<button
    class="btn btn-primary"
    [disabled]="allowNewRow"
    (click)="onClicked()"
  >
    Add a Row
</button>
<p>{{ note }}</p>

note = "Not Cliked";
onClicked() {
    this.note = "Clicked";
}

(event)="function($event)"

$event 是时间绑定的一个重要参数，我们可以通过$event获取所绑定的元素。

<div class="container">
  <input (input)="onInput($event)">
</div>

onInput(event: Event) {
  console.log('event', event)
}

 4、双向绑定（Property Binding）

[(ngModel)]="data"

可以自动触发输入事件更新组件的值，另外，由于是双向绑定，也会同时更新元素的值

想要使用ngModel首先得先在app.module.ts中导入FormModule

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

@NgModule({
  declarations: [],
  imports: [FormsModule],
  providers: [],
})

用法示例：

<input [(ngModel)]="note">
<p>{{ note }}</p>

note = "Not Cliked"