Question

我想用打字稿代码更新选择输入的选择值时遇到问题。我没有发现与此相关的任何东西，因为问题很具体。

在我的示例中，我想为国家列表选择输入。但是此输入可以动态更新，因为最后一个选项允许您添加新的国家/地区。

这是HTML文件：

<label for="select_country">Pays</label>
<select [(ngModel)]="selectedCountry"
        id="select_country"
        (change)="check_country()">
  <option *ngFor="let country of countries" >{{ country }}</option>
  <option >Nouveau pays</option>
</select>
{{ selectedCountry }}

相关的打字稿文件：

import { Component, OnInit } from '@angular/core';
import { CountriesService } from "../country.service"

@Component({
  selector: 'app-add-recette',
  templateUrl: './add-recette.component.html',
  styleUrls: ['./add-recette.component.css']
})
export class AddRecetteComponent implements OnInit {

  selectedCountry : string = "";
  countries : string [] = [];

  constructor(private countriesService: CountriesService) { }

  ngOnInit() {
    this.getCountries();
  }

  getCountries() : void{
    this.countriesService.getCountries()
    .subscribe(string => this.countries = string);
  }

  check_country() : void {
    if (this.selectedCountry === "Nouveau pays") {
      this.selectedCountry = "";
      let new_country = prompt("New country ?").trim();
      if (new_country && new_country.length > 0) {
        this.countriesService.add(new_country);
        this.selectedCountry = new_country;
      }
    }
  }
}

最后，服务很短：

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class CountriesService {

  countries : string [] = [
    "France", "Chine", "Nouvelle-Zélande"
  ]

  constructor() { }

  getCountries(): Observable<string[]> {
    return of(this.countries);
  }

  add(newC : string) : void {
    if (!(this.countries.includes(newC))) {
      this.countries.push(newC);
    }
  }
}

问题是：当我尝试选择国家/地区时，这很好。当我尝试添加新国家时，就可以了。当我从法国出发时，我尝试添加中国，它检测到它已经在数组中，因此它不添加它，而是指向中国，所以很好。但是，当从法国出发时，我尝试添加法国，因此selectedCountry已更新为法国，因此可以，但是select选项现在向我们显示Nouveau pays，这不是应该做的，因为this.selectedCountry等于法国。更一般而言，如果选择输入先前已在列表中，则添加一个已经在列表中的国家/地区不会更新选择输入。

我找到了this，但给出的解决方案不适用于我。

该行为非常令人惊讶。您如何看待？

非常感谢您的帮助

NgModel在选择输入中不会更新

0 个答案: