如何更新Angular模板驱动的表单页面上的输出值

Question

我正在尝试扩展Angular.io/guide/forms教程中给出的Angular模板驱动的表单。我添加了一个select控件，其值基于以下模型：

export class Power {
constructor(
public val: string,
public txt: string,
) { }
}

表单完成后，输出将同时发送到控制台和页面。我可以更新input字段的值，它们会在页面上(特别是div class="output"(和控制台中立即更新，但select元素不会更新。我有一种感觉，我没有绑定到正确的元素，或者我的整体模型不正确。代码包含在下面。如果有任何意见，我将不胜感激；TIA！

hero-form.component.ts:

import { Component } from '@angular/core';
import { Hero } from '../_models/hero';
import { Power } from '../_models/power'
@Component({
selector: 'app-hero-form',
templateUrl: './hero-form.component.html',
styleUrls: ['./hero-form.component.css']
})
export class HeroFormComponent {
powers = [
new Power('Strong', 'Really strong'),
new Power('Smart', 'Really smart'),
new Power('Hot','Really hot'),
new Power('Cold','Really cold'),
new Power('Weather','Weather changer'),
new Power('Time','Time traveller'),
];
model = new Hero('', this.powers[0], '');
submitted: boolean = false;
onSubmit: Function = () => {
console.log(this.model);
this.submitted = true;
}
constructor() { }
}

hero-form.component.html：

<h1>Hero Form</h1>
<form #HeroForm="ngForm" (ngSubmit)="onSubmit(HeroForm)">
<div class="form-group">
<label for="Name">Name</label>
<input
class="form-control"
type="text"
name="Name"
id="Name"
[(ngModel)]="model.name"
#name="ngModel"
required>
<p *ngIf="name?.touched && name?.errors"
class="alert alert-danger">
Name is required!
</p>
</div>
<div class="form-group">
<label for="Alias">Alias</label>
<input
class="form-control"
type="text"
name="Alias"
id="Alias"
[(ngModel)]="model.alias"
required
#alias="ngModel">
<p *ngIf="alias?.touched && alias?.errors"
class="alert alert-danger">
Alias is required!
</p>
</div>
<div class="form-group">
<label for="power">Hero Power</label>
<select
class="form-control"
id="power"
name="power"
required
[(ngModel)]="model.power"
#power="ngModel">
<option
*ngFor="let pow of powers;"
[ngValue]="pow.val">
{{pow.txt}}
</option>
</select>
</div>
<button type="submit" [disabled]="!HeroForm.valid">Submit</button>
</form>
<div class="output" *ngIf="model.name && model.alias">
<p class="name">{{model.name}}</p>
<p class="alias">{{model.alias}}</p>
<p class="power">
<span class="asterisk">***</span>
{{model.power.val}} <!-- THIS value does not update -->
<span class="asterisk">***</span>
</p>
</div>
<p>{{HeroForm.value | json}}</p>

Answer 1

您需要将整个power对象指定为每个select选项的值。否则，它只会将val字符串保存在model.power属性中。

<option
*ngFor="let pow of powers;"
[ngValue]="pow"> // <------
{{pow.txt}}
</option>

干杯