[英]select and option tags in Angular reactive forms
i'm tryng to create a select with one option for every element in my classes array.我正在尝试为我的类数组中的每个元素创建一个带有一个选项的选择。
This is my .ts file这是我的 .ts 文件
@Component({
selector: 'app-create-deck',
templateUrl: './create-deck.component.html',
styleUrls: ['./create-deck.component.scss']
})
export class CreateDeckComponent implements OnInit {
classes: ['Priest', 'Mage', 'Shaman', 'Rogue', 'Warrior', 'Warlock', 'Druid', 'Paladin']
createDeckForm: FormGroup;
constructor() { }
ngOnInit(){
this.createDeckForm = new FormGroup({
'deckName': new FormControl('Meme Deck'),
'chooseClass': new FormControl('class')
});
}
onSubmit() {
console.log(this.createDeckForm);
this.createDeckForm.reset();
is this the right way to loop over the array element?这是循环数组元素的正确方法吗?
And this is the .html这是.html
<div class="container">
<div class="row">
<form [formGroup]="createDeckForm" (ngSubmit)="onSubmit()">
<label for="deckName">Deck Name</label>
<input
type="text"
id="deckName"
formControlName="deckName"
class="form-control"
/>
<label for="chooseClass">Deck class</label>
<select id="chooseClass" name="chooseClass">
<option
*ngFor="let class of classes"
[value]="class">
{{class}}
</option>
</select>
</form>
</div>
</div>
what i'm doing wrong?我做错了什么?
The problem is that you decalre type instead of assign value to your array.问题是您对类型进行了 decalre 类型而不是为数组分配值。
Change this改变这个
classes: ['Priest', 'Mage', 'Shaman', 'Rogue', 'Warrior', 'Warlock', 'Druid', 'Paladin']
To this对此
classes= ['Priest', 'Mage', 'Shaman', 'Rogue', 'Warrior', 'Warlock', 'Druid', 'Paladin']
Or this或这个
classes:[] = ['Priest', 'Mage', 'Shaman', 'Rogue', 'Warrior', 'Warlock', 'Druid', 'Paladin']
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.