Angular 前端下拉选择框

心似烟火

于 2019-03-10 21:55:57 发布

阅读量2.3k

点赞数 2

分类专栏： ——【Angular】

本文链接：https://blog.youkuaiyun.com/sz15732624895/article/details/88384784

版权

——【Angular】专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用Angular框架实现的表单示例，重点在于如何通过nz-form-item组件和nz-select组件来创建带有下拉菜单的表单字段。具体展示了如何设置不同屏幕尺寸下的布局，以及如何通过TypeScript动态填充下拉选项。

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

html：

<nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="gradeNo">年级</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <nz-select (click)="searchGradeList()" [(ngModel)]="grade" formControlName="gradeNo" id="gradeNo" [nzSize]="size"
                nzPlaceHolder="请选择年级" nzShowSearch>
                <nz-option *ngFor="let option of gradeListOfOption" [nzLabel]="option.name" [nzValue]="option.code"></nz-option>
              </nz-select>
            </nz-form-control>
</nz-form-item>

ts：

searchGradeList() {
    this.gradeListOfOption = [{ name: '大一', code: '1' },
    { name: '大二', code: '2' },
    { name: '大三', code: '3' },
    { name: '大四', code: '4' }];
  }

显示结果：
在这里插入图片描述