表格
后台管理系统大多都是增删改查的操作，表格使用频率是最高的。正常的开发进度是写完页面的时候，后台接口还不能提供，只能写假数据去实现页面展示。
1.简单表格使用
race-list.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-race-list',
templateUrl: './race-list.component.html',
styleUrls: ['./race-list.component.css']
})
export class RaceListComponent implements OnInit {
listOfData = [
{
id: 1,
name: '牛头人',
address: '雷霆崖',
hero: '老牛',
text: '你的祖先在忽悠着你！',
},
{
id: 2,
name: '亡灵',
address: '幽暗城',
hero: '小黑',
text: '我们是被遗忘者！',
},
{
id: 3,
name: '暗夜精灵',
address: '达纳苏斯',
hero: '白虎',
text: '沃瑞死欧我热那也，阿森不！',
},
];
constructor() { }
ngOnInit(): void {
}
}
race-list.component.html
<nz-table #basicTable [nzData]="listOfData">
<thead>
<tr>
<th>名称</th>
<th>主城</th>
<th>领袖</th>
<th>简介</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of basicTable.data">
<td>{{ data.name }}</td>
<td>{{ data.address }}</td>
<td>{{ data.hero }}</td>
<td>{{ data.text }}</td>
</tr>
</tbody>
</nz-table>
由于在页面中使用zorro的组件nz-table，要在shared模块中引入
import { NzTableModule } from 'ng-zorro-antd/table';
const NGZORROMODULE = [
NzIconModule.forRoot(icons),
NzLayoutModule,
NzButtonModule,
NzDividerModule,
NzMenuModule,
NzTableModule
];
并将shared模块引入race-list组件对应的模块中
race.module.ts
import { SharedModule } from '@shared/shared.module';
import { RaceRoutingModule } from './race-routing.module';
import { RaceListComponent } from './race-list/race-list.component';
@NgModule({
declarations: [RaceListComponent],
imports: [
SharedModule,
RaceRoutingModule
]
})
export class RaceModule { }
打开页面，简单的表格就可以展示出来。
本项目表格演示
假设此页面需求是增删改查：
- 顶部为面包屑，展示对应模块名称
- 表格上面是查询条件、查询按钮和新增按钮
- 表格的第一列是勾选框，配合底部导航中的启用和禁用
- 表格的第二列是删除图标，删除当前行
- 表格的第三列是名称，点击名称进入修改页面
需求解析：
先修改当前页面在加上面包屑、查询条件、表格和底部禁用按钮。
面包屑（breadcrumb）可参考官网，先在shared模块中引入，还需要在根路由中添加名称，
shared.module.ts
import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
// ng-zorro模块
const NGZORROMODULE = [
...
NzBreadCrumbModule,
];
routes-routing.module.ts
const routes: Routes = [
{
path: '',
component: DefaultComponent,
children: [
{
path: 'race',
loadChildren: () => import('./race/race.module').then(mod => mod.RaceModule),
data: { breadcrumb: '种族' }
},
....
配合nzAutoGenerate属性可以自动获取{ breadcrumb: '种族' }里面的值
<nz-breadcrumb nzAutoGenerate="true"></nz-breadcrumb>
查询条件配合表单更简洁
需要在shared模块引入nz-input模块，还需要动态表单
shared.module.ts
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
import { NzFormModule } from 'ng-zorro-antd/form';
// angular模块
const ANGULARMODULE = [
...
ReactiveFormsModule
];
// ng-zorro模块
const NGZORROMODULE = [
...
NzFormModule,
];
按照formGroup的固定写法，不用校验条件即可。
race-list.component.html
...
<form nz-form [formGroup]="validateForm" class="form-container">
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="8">
<nz-form-item>
<nz-form-label>名称</nz-form-label>
<nz-form-control>
<input nz-input formControlName="name" />
</nz-form-control>
</nz-form-item>
</div>
<div nz-col [nzSpan]="8">
<nz-form-item>
<nz-form-label>主城</nz-form-label>
<nz-form-control>
<input nz-input formControlName="address" />
</nz-form-control>
</nz-form-item>
</div>
<div nz-col [nzSpan]="8">
<nz-form-item>
<nz-form-label>英雄</nz-form-label>
<nz-form-control>
<input nz-input formControlName="hero" />
</nz-form-control>
</nz-form-item>
</div>
</div>
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="8">
<nz-form-item>
<nz-form-label>简介</nz-form-label>
<nz-form-control>
<input nz-input formControlName="text" />
</nz-form-control>
</nz-form-item>
</div>
<div nz-col [nzSpan]="8">
<nz-form-item>
<nz-form-label>状态</nz-form-label>
<nz-form-control>
<nz-select formControlName="status" style="width: 158px">
<nz-option nzValue="active" nzLabel="活动"></nz-option>
<nz-option nzValue="disabled" nzLabel="禁用"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col [nzSpan]="8">
<nz-space>
<nz-space-item>
<button nz-button [nzType]="'primary'" (click)="queryRaceList()">查询</button>
</nz-space-item>
<nz-space-item>
<button nz-button [nzType]="'primary'" (click)="addRace()">新增</button>
</nz-space-item>
</nz-space>
</div>
</div>
</form>
...
race-list.component.ts
...
export class RaceListComponent implements OnInit {
validateForm: FormGroup;
...
constructor(
private fb: FormBuilder,
private modal: NzModalService,
private router: Router
) {
this.validateForm = this.fb.group({
name: [null],
address: [null],
hero: [null],
text: [null],
status: [null],
});
}
...
表格使用官网上带checkbox的表格
表格的写法有点难度，要自行处理不同需求的表格
底部按钮
样式绝对定位，字体向右即可，使用NzSpace间距来调整按钮两边的间距，同样需要引入
shared.module.ts
import { NzSpaceModule } from 'ng-zorro-antd/space';
// ng-zorro模块
const NGZORROMODULE = [
...
NzSpaceModule,
];
使用方法简单：
<div class="g-footer">
<nz-space>
<nz-space-item>
<button nz-button [nzType]="'primary'" [disabled]="!btnActive" (click)="clickHandle('A')">启用</button>
</nz-space-item>
<nz-space-item>
<button nz-button [nzType]="'primary'" [disabled]="!btnDisabled" (click)="clickHandle('D')">禁用</button>
</nz-space-item>
</nz-space>
</div>
新增和修改
新增和修改的内容基本一致，选择使用同一页面初始化不同值即可。
创建新组件：
ng g c race-add
添加对应页面路由
race-routing.module.ts
...
const routes: Routes = [
{ path: '', component: RaceListComponent },
{ path: 'add', component: RaceAddComponent }
];
...
点击页面新增或修改时，跳转页面，修改时将对应行的id带入下个页面，后面页面对应解析处理。
race-list.component.ts
constructor(private router: Router) { }
addRace(): void {
this.router.navigate(['/race/add']);
}
nextPage(data): void {
this.router.navigate(['/race/add'], { queryParams: { id: data.id, name: data.name } });
}
race-add.component.ts
constructor(private activeRoute: ActivatedRoute,) { }
ngOnInit(): void {
const snapshot = this.activeRoute.snapshot;
if (snapshot && snapshot.queryParams && Object.keys(snapshot.queryParams).length) {
const { id, name } = snapshot.queryParams;
} else {
}
}
新增和修改页面展示面包屑、表单和底部导航栏，针对表单赋值进行处理
race-add.component.ts
ngOnInit(): void {
const snapshot = this.activeRoute.snapshot;
if (snapshot && snapshot.queryParams && Object.keys(snapshot.queryParams).length) {
this.isAdd = false;
const { id, name } = snapshot.queryParams;
snapshot.data = { breadcrumb: name };
// 根据id查询出详情
const raceInfo = {
id: 1,
name: '牛头人',
address: '雷霆崖',
hero: '老牛',
text: '你的祖先在忽悠着你！',
status: 'A',
};
this.validateForm = this.fb.group({
name: [raceInfo.name, Validators.required],
address: [raceInfo.address, Validators.required],
hero: [raceInfo.hero, Validators.required],
text: [raceInfo.text, Validators.required],
status: [raceInfo.status, Validators.required],
});
} else {
this.isAdd = true;
snapshot.data = { breadcrumb: '新增种族' };
this.validateForm = this.fb.group({
name: [null, Validators.required],
address: [null, Validators.required],
hero: [null, Validators.required],
text: [null, Validators.required],
status: [null, Validators.required],
});
}
}
