有没有办法在angular中创建一个下拉列表?

Question

我在angular中使用mat-list创建了一个列表。下面是我的代码:

<mat-list style="display: inline-grid;">
<mat-list-item *ngFor="let item of item">
<mat-checkbox
[(ngModel)]="item.checked"
[disabled] = "item.disabled"            
>{{ item.name }}</mat-checkbox>
</mat-list-item>
</mat-list>

现在，有一个列表正在显示。我有没有办法把所有这些项目都放在一个下拉菜单里?

Answer 1

从Angular Material中查看Select组件link

下面是一个基本的例子:

<mat-form-field appearance="fill">
<mat-label>Favorite food</mat-label>
<mat-select>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>

interface Food {
value: string;
viewValue: string;
}
@Component({...})
export class SelectOverviewExample {
foods: Food[] = [
{value: 'steak-0', viewValue: 'Steak'},
{value: 'pizza-1', viewValue: 'Pizza'},
{value: 'tacos-2', viewValue: 'Tacos'},
];
}