angular 常用指令

1.表单

2.其它

参考：https://www.bilibili.com/video/BV1Wt411V7RC?p=10

 

1.表单

添加表单

import {FormsModule} from '@angular/forms'

双向绑定，input例子：
<input  [(ngModel)]="title" >

 

 

2.其它

 

<p>header works!</p>
<h1>{{title}}</h1>
<div [innerHTML]="'<h1>你好，世界</h1>'"></div>
<p *ngFor="let item of students">
  {{item}}
</p>
<p *ngIf="isTeacher">老师</p>
<p *ngIf="!isTeacher">非老师</p>
<input  [(ngModel)]="title" >
<div [ngSwitch]="sex">
  <p *ngSwitchCase="1">男</p>
  <p *ngSwitchCase="0">女</p>
  <p *ngSwitchDefault>未知</p>
</div>
<input type="button" value="aaa" (click)="show()">
<img [src]="url" />

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  title = "你好，世界"

  url = "https://www.baidu.com/img/PC_880906d2a4ad95f5fafb2e540c5cdad7.png"

  students = ["张三", "李1", "李2"]

  sex = 3

  isTeacher = true

  constructor() {
  }

  ngOnInit(): void {
  }

  show(): void {
    console.log(this.title)
  }
}