gpt4 book ai didi

angular - 如何在 Angular 6 中使用循环选择下拉列表?

转载 作者:太空狗 更新时间:2023-10-29 17:49:11 25 4
gpt4 key购买 nike

我有一个数组作为集合,我想将它加载到下拉列表中,我想在某些情况下使用默认选择,但我不知道如何实现。

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-commingsoon',
templateUrl: './commingsoon.component.html',
styleUrls: ['./commingsoon.component.css']
})
export class CommingsoonComponent implements OnInit {
public collection = [];
constructor() {
for(let i = 1; i<=10 ; i++) {
this.collection.push(`Angular: ${i}`);
}
}

ngOnInit() {
}

}

app.component.html

<select name="" id="" style="position:relative; left: 100px">
<option *ngFor="let i of collection;" value="{{i}}" [selected]="i == Angular: 2">{{ i }}</option>
</select>

我希望下拉应该选择当 i == Angular: 2 时的值

最佳答案

这是使用 ngModel 的典型方式如果您以后要处理选定的值,这会更方便。

<select [(ngModel)]="selectedValue">
<option *ngFor="let option of options" [value]="option.id">
{{option.name}}
</option>
</select>

https://stackblitz.com/edit/angular-njs3tz

关于angular - 如何在 Angular 6 中使用循环选择下拉列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53257393/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com