angular6 基本语法——属性、变量、ngIf、ngFor

最新推荐文章于 2023-03-15 15:16:45 发布

原创最新推荐文章于 2023-03-15 15:16:45 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

angular6、ionic4、typescript、rx 专栏收录该内容

46 篇文章

订阅专栏

本文深入探讨Angular框架中的核心绑定技术，包括属性、事件、类及条件绑定，以及*ngIf、*ngFor等指令的使用方法。通过实例演示了input双向绑定、自定义属性设置和事件定义的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义设置属性值

<div [id]='myName'>
	{{myName}}
</div>
<div id={{myName}}>
	{{myName}}
</div>
<div bind-id='myName'>
	{{myName}}
</div>
<div [attr.myname]='myName'>
	{{myName}}
</div>

模板绑定是通过 property 和事件来工作的，而不是 attribute。

ngClass

<div [ngClass]="{'special': isSpecial}"></div>

*ngIf用法

<tr *ngIf="isAdd"></tr>

*ngFor循环

<tr *ngFor="let item of tableArr;let key=index;">
	<td>{{item.formid}}</td>
	<td>{{item.datasetid}}</td>
	<td>{{item.len}}</td>
	<td>{{item.entertime}}</td>
	<td>{{item.savetypeName}}</td>
	<td>{{item.version}}</td>
	<td>
		<button (click)="delItem(key)">删除</button>
	</td>
</tr>

input双向绑定


/**
 * 告诉angular 如何组装应用
 */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { HttpClientModule }   from '@angular/common/http';

import { AppComponent } from './app.component';

//@NgModule 装饰器将AppModule标记为Angular 模块类（也叫做 NgModule类）
// @NgModule 接收一个元数据对象，告诉Angular 如何编译和启动应用
@NgModule({
  // 引入当前项目运行的组件，自定义组件都需要引入并且在这里声明
  // 依赖注入
  declarations: [
    AppComponent
  ],
  // 当前项目依赖哪些模块
  imports: [
    BrowserModule,
    HttpClientModule,
    // 如果要引入双向绑定，则需要引入FormModule
    FormsModule,
    AppRoutingModule
  ],
  // 定义服务
  providers: [
    StorageService
  ],
  // 默认启动哪个组件
  bootstrap: [AppComponent]
})

// 根模块不需要导出任何东西，因为其他组件不需要导入根模块，但是一定要写
export class AppModule { }

需要引入 import { FormsModule } from '@angular/forms';

<input type="text" [(ngModel)]="username">

定义事件

<button (click)="addRowData()">添加</button>

定义事件是在 Component中定义一个方法

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

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

  public tableArr: any = [];
  public formid: string = '';
  public datasetid: string = '';
  public len: string = '';
  public savetype: string = '1';
  public version: boolean = false;
  public entertime: number = new Date().getTime();
  public isAdd: boolean = false;

  constructor() {

  }

  addRowData () {
    this.isAdd = true;
    this.formid = "";
    this.datasetid = "";
    this.len = "";
    this.savetype = "1";
    this.version = false;
    this.entertime = new Date().getTime();
  }

  // 添加一行数据
  saveItem() {
    const that = this;
    var newItem = {
      savetype: that.savetype,
      savetypeName: that.savetype==="1"?"全匹配更新":"按主键更新",
      formid: that.formid,
      datasetid: that.datasetid,
      len: that.len,
      version: that.version,
      entertime: that.entertime
    };
    this.isAdd = false;
    this.tableArr.push(newItem);
  }

  cancelAdd() {
    this.isAdd = false;
  }

  // 删除数据
  delItem (index) {
    this.tableArr.splice(index, 1);
  }

  ngOnInit() {
  }

}