如何更新 Angular 模板驅動表單頁面上的輸出值？

Question

我正在嘗試擴展 angular.io/guide/forms 教程中給出的Angular模板驅動表單。 我添加了一個select控件，其值基於以下 model：

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

表單完成后，output 將同時發送到控制台和頁面。 我可以更新input字段的值，它們會立即在頁面（特別是div class="output" ）和控制台中更新，但select元素不會更新。 我感覺我沒有綁定到正確的元素，或者我的整體 model 不正確。 代碼包含在下面。 我會很感激任何意見； 蒂亞！

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

您需要將整個功率 object 分配為每個 select 選項的值。 否則它只會將val字符串保存在model.power屬性中。

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

干杯