要创建一个Angular应用程序,其中包含多个下拉列表,可以按照以下步骤进行操作:
创建一个新的Angular应用程序:
ng new dropdown-example
进入项目目录:
cd dropdown-example
创建一个新的组件来处理下拉列表:
ng generate component dropdown
在app.component.html
文件中添加一个按钮和一个
标签:
在app.component.ts
文件中添加以下代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
dropdowns: any[] = [];
showDropdowns() {
this.dropdowns.push({ options: ['选项1', '选项2', '选项3'] });
}
}
在dropdown.component.html
文件中添加一个下拉列表:
在dropdown.component.ts
文件中添加以下代码:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent {
@Input() options: string[];
}
运行应用程序:
ng serve
现在,当您点击按钮时,将显示一个新的下拉列表。每个下拉列表都使用options
属性传递选项数组。