更改下拉列表的选定值-双向绑定

Question

我有一个下拉菜单，在某些情况下我想更改其选择的值。 目前，我正在使用双向绑定，但是从ts文件更改值时，该值没有更改。 我一定很想念东西。

HTML代码：

  <form class="teamForm"> <div class="row"> <div class="col-6 right" *ngFor="let player of playersArray; let i=index"> <label class="col-12 col-md-4 right"> name: <span class="fa fa-futbol"></span> <input [(ngModel)]="player.name" class="form-control input-lg" name="playerName{{i}}" /> </label> <label class="col-12 col-md-2 right"> rate: <span class="fa fa-futbol"></span> <select [(ngModel)]="player.rate" (change)="checkRatingLimit($event.target.value, player)" name="playerRate{{i}}" class="form-control"> <option [ngValue]="0">Choose</option> <option *ngFor="let rating of ratingList" [ngValue]="rating.value">{{rating.key}}</option> </select> </label> </div> </div> </form> 

ts代码：

 checkRatingLimit(rating: string, player:Player) { let ratings : Player[] = this.playersArray.filter(p => p.rate == Number(rating)); if(ratings.length>this.teams) { debugger; player.rate = 0; console.log(this.playersArray) } 

我期望在执行player.rate = 0时更改select ，然后将0值作为下拉列表中的选定值。

Answer 1

反应形式的解决方案

最简单的选择

 <form [formGroup]="countryForm">
     <select formControlName="countryControl">
      <option [value]="country" *ngFor="let country of countries">{{country}}
      </option>
     </select>
 </form>

并在.ts文件中

countryForm: FormGroup;
countries = ['USA', 'Canada', 'Uk']
constructor(private fb: FormBuilder) {}
ngOnInit() {
 this.countryForm = this.fb.group({
   countryControl: ['Canada']
 });

//to change the value programmatically you need to patch the value
this.countryForm.patchValue({
   countryControl:  ['USA']
});
}