好的！我可以为您提供一个简单的示例程序，它
使用了ng-zorro-
antd组件库中的七种
组件：
1. Button（按钮）
2. Input（输入框）
3. Checkbox（复选框）
4. Radio（单选框）
5.
Select（
下拉选择框）
6.
Datepicker（日期选择器）
7. Table（表格）
以下是示例程序的代码：
app.module.ts
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NzButtonModule, NzInputModule, NzCheckboxModule, NzRadioModule, Nz
SelectModule, Nz
DatePickerModule, NzTableModule } from 'ng-zorro-
antd';
import { AppComponent } from './app.component';
@NgModule
({
imports: [ BrowserModule, FormsModule, BrowserAnimationsModule, NzButtonModule, NzInputModule, NzCheckboxModule, NzRadioModule, Nz
SelectModule, Nz
DatePickerModule, NzTableModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
}
)
export class AppModule { }
```
app.component.ts
```typescript
import { Component } from '@angular/core';
interface User {
name: string;
age: number;
gender: string;
}
@Component
({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
}
)
export class AppComponent {
users: User[] = [
{ name: '张三', age: 20, gender: '男' },
{ name: '李四', age: 25, gender: '女' },
{ name: '王五', age: 30, gender: '男' },
];
selectedUser: User = null;
newUser: User = { name: '', age: null, gender: '' };
genderOptions = [ { label: '男', value: '男' }, { label: '女', value: '女' } ];
selectUser
(user: User
): void {
this.
selectedUser = user;
}
addUser
(): void {
this.users.push
(this.newUser
);
this.newUser = { name: '', age: null, gender: '' };
}
deleteUser
(user: User
): void {
const index = this.users.indexOf
(user
);
if
(index >= 0
) {
this.users.splice
(index, 1
);
this.
selectedUser = null;
}
}
}
```
app.component.html
```html
<h1>用户管理</h1>
<div style="display: flex; flex-direction: row;">
<div style="flex: 1;">
<nz-table [nzData]="users" [nzFrontPagination]="false" [nzBordered]="true" [nzSize]="'middle'"
(nzClick
)="
selectUser
($event
)">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users">
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
<td>{{ user.gender }}</td>
</tr>
</tbody>
</nz-table>
<div style="margin-top: 16px;">
<button nz-button [nzType]="'primary'" [disabled]="
selectedUser === null"
(click
)="deleteUser
(selectedUser
)">删除</button>
</div>
</div>
<div style="flex: 1; margin-left: 16px;">
<form #userForm="ngForm">
<div>
<label>姓名：</label>
<input nz-input [
(ngModel
)]="newUser.name" name="name" required>
</div>
<div>
<label>年龄：</label>
<input nz-input [
(ngModel
)]="newUser.age" name="age" type="number" required>
</div>
<div>
<label>性别：</label>
<nz-radio-group [
(ngModel
)]="newUser.gender" name="gender" required>
<label nz-radio *ngFor="let option of genderOptions" [nzValue]="option.value">{{ option.label }}</label>
</nz-radio-group>
</div>
<div style="margin-top: 16px;">
<button nz-button [nzType]="'primary'" [disabled]="!userForm.valid"
(click
)="addUser
()">
添加</button>
</div>
</form>
</div>
</div>
```
这个示例程序演示了如何
使用ng-zorro-
antd组件库中的七种
组件来实现一个简单的用户管理功能，包括显示用户列表、选择用户、
添加用户和删除用户。您可以参考这个示例程序来编写自己的Angular程序，
使用ng-zorro-
antd组件库中的各种
组件来实现您想要的功能。
扫一扫
1535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
